How to use BFC to clear CSS floats and resolve margin merge issues

1, the most basic layout unit of CSS

Box is the object and basic unit of the CSS layout. 　　

The type of the element and the properties of the display determine the type of box.

2, BFC

　　BFC (Box formatting Context) is a separate rendering area that specifies how the inner elements are laid out and independent of the external elements.

formatting Context is a concept in the CSS2.1 specification. It is a rendered area of the page and has its own rendering rules that specify how the inner child elements are positioned and how they relate to and interact with other elements.

3. BFC Layout Rules

• The Inner box is placed one after the other in the vertical direction.
• The vertical distance of the box is determined by margin. Overlays are superimposed on the two adjacent box margin that belong to the same BFC.
• The left side of the margin box for each element touches the left side of the containing block border box. This is true even if it floats.
• The BFC area does not overlap with the float box.
• BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements, and vice versa.
• When calculating the height of the BFC, floating elements are also involved in the calculation.

4. What elements generate BFC?

• root element;

• The Float property is not none;

• Position for absolute or fixed;

• Display for Inline-block,table-cell,table-caption,flex,inline-flex;

• The overflow is not visible;

5, the function and principle of BFC

Adaptive two-column layout: Left-width-height, right-adaptive.
Floating on the left, then overlapping left and right, according to the rules of BFC third to fourth, set the element to the BFC.

Clear internal float:
Inside an element, there are two floating elements, and the height of the parent element is not calculated by default to the height of the floating element.
Solution, according to BFC rule sixth.

To prevent vertical margin overlays:
The margin of the elements adjacent to the BFC is superimposed.
According to BFC rule fifth, one of the BFC can be set.

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.

　　

　　

How to use BFC to clear CSS floats and resolve margin merge issues