CSS understands block-level format context BFC

1.BFC Definition

BFC (block formatting context) literal translation is "chunk-level formatting context". It is a separate rendering area, with only block-level box (block-level elements) involved, which specifies how the internal block-level box is laid out and irrelevant to the outside of the area.

In layman's terms: the element that created the BFC is a separate box in which the child elements are not on the layout
Elements that affect the outside (how the layout does not affect the outside), BFC still belongs to the normal flow in the document

Generation of 2.BFC:

You know how BFC triggers BFC.
One of the following conditions can trigger BFC and become BFC

1. root element

2. The Float property is not none

3. Position not for static and relative

4. The overflow is not visible

5. Display for Inline-block, Table-cell, Table-caption, Flex, Inline-flex
   

You'll find BFC everywhere, just don't know when you're using it.

3.BFC Layout Rules:

What are the characteristics of BFC after change?

1. The inner box is placed vertically, one by one.

2. The vertical distance of the box is determined by margin. The margin of two adjacent boxes that belong to the same BFC overlap

3. The left side of each element's margin box is in contact with the left side of the containing block border box (or vice versa for formatting from left to right). This is true even if there is a float.

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

5. BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements. The reverse is true.

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

4.BFC function:

Used up come Boby

1. Prevent margin overlap

BFC causes a margin overlap that belongs to child elements in the same BFC (the box vertical distance is determined by margin.) The margin of the two adjacent box that belongs to the same BFC overlaps)

Problem: As can be seen from the figure, only 20px between String1 and String2 margin, supposedly 40px, but this is in the BFC caused their margin overlap

Code:

<style>.container1{/        * can create BFC */        Overflow:hidden through Overflow:hidden;        background-color:red;        width:300px;    }    . sub1{        margin:20px 0px;        Background-color: #dea;    } </style><p class= "Container1" >        <p class= "sub1" >String1</p>        <p class= "Sub1" >String2</p></p>

Workaround: We can wrap a layer of container outside p and trigger the container to generate a BFC. Then two P will not belong to the same BFC, there will be no margin overlap.

Code:

<style>    . newbfc{            Overflow:hidden;    } </style><p class= "Container1" >        <p class= "sub1" >String1</p>        <p class= "NEWBFC" ><p class= "Sub1" >String2</p></p></p>

2. Clear the float:

Problem: When the element's child elements are floating, a highly collapsed phenomenon occurs, that is, the height of the parent container will not be stretched

Code:

<style>    . pre2{        width:200px;        border:2px solid red;    }    . float1,.float2{        width:100px;        height:100px;        Float:left;    }    . float1{        background-color: #dee;    }    . float2{        background-color: #dcc;    } </style><p class= "Pre2" >        <p class= "FLOAT1" ></p>        <p class= "Float2" ></p ></p>

Workaround:

BFC rule: When calculating the height of the BFC, the floating element is also involved in the calculation so as long as the parent container is set to BFC it can be included in the element:
The container will contain the floating child element, and its height will extend to the child elements that can contain it, and in this BFC, these elements will return to the regular document flow of the page.

. pre2{        width:200px;        border:2px solid red;        /* Set overflow*/        overflow:hidden;    }

3. Resolve layout: Prevent text wrapping

Code:

<style>.container2{        Overflow:hidden;        width:200px;    }    . box{        Float:left;        width:100px;        height:30px;        Background-color: #daa;    } </style><p class= "Container2" >        <p class= "box" ></p>        <p style= "Background-color : #eea ">SDFADSFDFF Fffffffds fsfffff sfd  fsdsdfsdf fffffff</p></p>

The P element does not move, but it appears below the floating element. The P element's line boxes (refers to the lines of text) is shifted. The horizontal contraction of line boxes here provides a space for floating elements.

BFC rule: The left side of each element's margin box is in contact with the left side of the containing block border box (or vice versa for formatting from left to right). This is true even if there is a float.

To solve this problem, just add the P element Overflow:hidden make it a new BFC.