Uncover the veil of BFC in CSS

Introduction:

This article is my understanding and summary of BFC, take you to uncover the veil of BFC. You will know what BFC is, the conditions that form BFC, the related characteristics of BFC, and his practical application.

First, what is BFC

The BFC (Block formatting context) formatting context is a CSS rendering mode for the layout of a box model in a Web page, which refers to a separate rendering area or a separate container that is isolated.

Ii. conditions for the formation of BFC

1, floating elements, float except none of the values;
2, positioning elements, Position (absolute,fixed);
3, display for one of the following values inline-blocks,table-cells,table-captions;
4, overflow except visible value (Hidden,auto,scroll);

Third, the characteristics of BFC

1. The inside box will be placed one by one in the vertical direction.
2. Distance in the vertical direction is determined by margin
The area of 3.BFC does not overlap with the element area of float.
4. When calculating the height of the BFC, floating elements are also involved in the calculation
5.BFC is a separate container on the page, and the child elements inside the container do not affect the outer elements.

See here is not confused feeling, below I use case to help understand understanding:

Practice is the only standard to test truth

(1) Align the boxes in the BFC

The first of the features is that the inner box is placed one after another in the vertical direction.

The floating element is also the case, box3 floats, he still goes on a box vertically arranged. And all the boxes are left-aligned.

Layout:

    <Divclass= "Container">        <Divclass= "Box1"></Div>        <Divclass= "Box2"></Div>        <Divclass= "Box3"></Div>        <Divclass= "Box4"></Div>    </Div>

Css:

Div{Height:20px; }. Container{position:Absolute;/*Create a BFC environment*/Height:Auto;Background-color:#eee; }. Box1{width:400px;Background-color:Red; }. Box2{width:300px;Background-color:Green; }. Box3{width:100px;Background-color:Yellow;float: Left; }. Box4{width:200px;Height:30px;Background-color:Purple; }

(2) margin folding

The second of the characteristics: the distance in the vertical direction is determined by margin.

In the regular document flow, the vertical distance between the two sibling boxes is determined by their margins, but not by the sum of their two margins, but by the larger one.

Layout:

    <class= "container">        <class = "box" ></ Div >        <  class= "box"></div>    </  div>

Css:

. Container{Overflow:Hidden;width:100px;Height:100px;Background-color:Red; }. Box1{Height:20px;margin:10px 0;Background-color:Green; }. Box2{Height:20px;margin:20px 0;Background-color:Green; }

Here we can see that the first sub-box has the top margin (no margin penetration problem); The vertical distance of two sub-boxes is 20px instead of 30px, because the vertical margins are folded and the spacing is larger.

So is there a way to keep the vertical margins from collapsing? The answer is: yes. The 5th of the feature says: BFC is a separate container on the page, the child elements inside the container do not affect the outer elements, and the outer elements do not affect the elements within the BFC. So let Box1 or Box2 again in another BFC in the line.

Layout:

    <Divclass= "Container">        <Divclass= "wrapper">            <Divclass= "Box1"></Div>        </Div>        <Divclass= "Box2"></Div>    </Div>

Css:

. Container{Overflow:Hidden;width:100px;Height:100px;Background-color:Red; }. Wrapper{Overflow:Hidden; }. Box1{Height:20px;margin:10px 0;Background-color:Green; }. Box2{Height:20px;margin:20px 0;Background-color:Green; }

(3) not covered by floating elements

Take the usual two-column layout as an example.

Fixed width on the left, no width on the right, so the right width is adaptive, changing with the size of the browser window.

Layout:

    <class= "column"></div>     <class= "column"></div>

Css:

. Column:nth-of-type (1){float: Left;width:200px;Height:300px;Margin-right:10px;Background-color:Red; }. Column:nth-of-type (2){Overflow:Hidden;/*Create BFC*/Height:300px;Background-color:Purple; }

There is also a three-column layout.

The left and right sides are fixed width, the middle is not set wide, so the middle width adaptive, with the size of the browser changes.

Layout:

    <Divclass= "contain">        <Divclass= "column"></Div>        <Divclass= "column"></Div>        <Divclass= "column"></Div>    </Div>

Css:

. Column:nth-of-type (1),. Column:nth-of-type (2){float: Left;width:100px;Height:300px;Background-color:Green; }. Column:nth-of-type (2){float: Right; }. Column:nth-of-type (3){Overflow:Hidden;/*Create BFC*/Height:300px;Background-color:Red; }

It can also be used to prevent font wrapping:

It is well known that the floating box will cover the box below, but the text in the box below will not be covered, but the text will wrap around the floating box. This is also a more interesting feature.

Layout:

    <class= "Left"></div>    < P > Hello hello hello hello hello you hello hello hello hello how are you hello Hello hello hi
       Hello hello hello hello hello how are you hello hello hello you hi hello hey hi you hello hello hi
       Hello hello hello hello hello hello how are you hello hello hello you hello hello how are you hello hello you hello hello hey hello hi
    </p>

Css:

(1) Surround

        {            float: left;             width: 100px;             height: 100px;             background-color: yellow;        } {background-color: green;                                         /* */        }

(2) Use BFC to prevent surround

        {            float: left;             width: 100px;             height: 100px;             background-color: yellow;        } {background-color: green;                                          Overflow: hidden;        }

(4) BFC contains floating blocks

This is familiar to everyone, use Overflow:hidden to clear the float, because the floating box can not support the standard document flow of the parent box height. This is not too much explanation, I believe we have already understood.

Summarize

I hope this article has shown you the relevant features of BFC and how they affect the visual positioning of elements on the page. All of these examples show how they are used in real-world cases, which should make them clearer.

If you have anything to add, please leave a comment in the comments and welcome to discuss it together.

Uncover the veil of BFC in CSS