The magic of BFC in CSS.

This time brings you the magic of BFC in CSS. , the use of BFC CSS in the attention of the matter, the following is the actual case, together to see.

When writing a style, it is often the addition of a style, or the modification of a property, to achieve our expectations.

And BFC is hidden in it, when you modify the style, accidentally can trigger it without noticing, so do not realize the magic of BFC.

First, what is BFC (Block formatting Context)

When writing CSS styles, we first need to know whether this element is a block-level element or an inline element, and BFC is used to format the block-level box.

Formatting Context: Refers to a rendered area of the page and has a set of rendering rules that determine how its child elements are positioned and how they relate to and interact with other elements.

BFC Definition: Block-level formatting context, which refers to a separate block-level rendering area that only block-level box participates in, which has a set of rendering rules to constrain the layout of block-level boxes and is independent of the outside of the area.

Second, the generation of BFC

When we say that BFC is a rendering area, where exactly is this rendering area, and what is the size? These are determined by the elements that generate BFC.

An element that satisfies one of the following CSS declarations generates BFC:

1. The root element or other element that contains it

2, the value of float is not none;

3, the value of overflow is not visible;

4, the value of position is not static;

5, display value is Inline-block, Table-cell, table-caption;

6, Flex boxes (element of the Display:flex or Inline-flex);

Note: Some people think that display:table can generate BFC, I think the main reason is that table will default to generate an anonymous Table-cell, it is this anonymous Table-cell generated BFC.

Three, the layout rule of BFC

Briefly summarized as follows:

1, the internal elements will be in the vertical direction one by one, can be understood as a regular flow in the BFC

2. The vertical distance of the element is determined by margin, i.e. the margin of the two adjacent boxes belonging to the same BFC may overlap

3. The left margin of each element touches the left edge of the containing block (from left to right, otherwise), even if there is a float, which means that the child element in BFC does not exceed its containing block

4. The BFC area does not overlap with the float element area

5. When calculating the height of the BFC, the floating child elements are also involved in the calculation

6, BFC is a separate container on the page, the child elements inside the container will not affect the outside elements, and vice versa

Iv. Application of BFC

Having said so much, what is the use of our BFC? Let's take a few examples to solve some of the problems:

Example 1, solving margin overlap problem

Friends who play CSS know that the margin collapse, that is, the adjacent vertical elements at the same time set the margin, the actual margin value will collapse to the larger of the value.

The fundamental principle is that they are in the same BFC, conforming to the rule that "margin of two adjacent elements belonging to the same BFC will overlap".

Margin overlap phenomenon

<! DOCTYPE html>




Through the experimental results, we found that the upper margin overlaps.

We can wrap a layer of container outside one of the elements and trigger the container to generate a BFC. Then two elements belong to different BFC, and there will be no margin overlap.

We make the following changes:

<p class= "box" >    <p>lorem ipsum dolor sit.</p> <p    style= "Overflow:hidden;" >        <p>lorem ipsum dolor sit.</p>    </p>    <p>lorem ipsum dolor sit.</p></ P>
We used Overflow:hidden and generated a BFC that successfully solved the margin overlap problem.




Example 2, solving floating problems

We know that setting Overflow:hidden to the parent element clears the floating of the child elements, but often does not know what the principle is.

In fact, this is the application of the principle of BFC: When set Overflow:hidden in the parent element will trigger BFC, so his internal elements will not affect the outside layout, BFC the floating sub-element height as the height of their own internal to handle overflow, so the outside seems to have cleared the float.

<! DOCTYPE html>


We make the following changes:

. one {        background-color:pink;        Overflow:hidden;    }


The comparison found that when an element is set to BFC, the floating elements are also involved in calculating the height of the BFC element.

Example 3, solving the problem of encroaching floating elements

We know that the floating element is out of the document flow and then floats on the document flow element.

<! DOCTYPE html>
When one element floats and another element does not float, the floating element is covered by the non-floating element because it is out of the document flow.

We make the following changes:

. box2 {        width:200px;        height:200px;        Background-color:skyblue;        Overflow:hidden;    }
or modify as follows:

. box2 {        width:200px;        height:200px;        Background-color:skyblue;        /* Overflow:hidden; */        float:left;    }

We set up a BFC environment for non-floating elements, which solves the problem of encroachment elements according to the rules of BFC not overlapping with float box.

This feature, I think, is very useful, especially in the two-column layout, compared to our conventional method of setting the margin for non-floating elements or non-locating elements, the advantage is that there is no need to know the width of the floating or positioning elements.


Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Animated sequence of CSS3 animation

How CSS quirks box models and standard box models are used