1. First of all, we need to understand the common positioning schemes, there are 3 types in total (normal flow, floating, absolute positioning)
BFC is an ordinary stream.
We can think of BFC as a rendering area of the page. It has its own rendering rules.
Simply put, BFC can be regarded as an attribute of an element. When an element has the BFC attribute, the element can be viewed
It is an isolated independent container, and the elements inside the container will not affect the layout of the elements outside.
2. The concept of BFC
BFC (Block formatting context) literally translates as "block-level formatting context". It is an independent rendering area in which only the Block-level box participates. It stipulates how the internal Block-level Box is laid out and has nothing to do with the outside of this area.
The explanation given by MDN is: BFC is part of the visual CSS rendering of the Web page. It is the area where the layout process of the block box occurs, and it is also the area where floating elements interact with other elements.
3. How to generate BFC
- The value of float is not none.
- The value of position is not static or relative.
- The value of display is inline-block, table-cell, flex, table-caption or inline-flex
- The value of overflow is not visible
4. BFC rules
BFCIt is a block-level element. Block-level elements will be arranged one after another in the vertical direction.BFCIt is an isolated independent container in the page. The tags in the container will not affect the external tags.- The vertical distance is determined by margin.
BFCThe margins of two adjacent labels belonging to the same label will overlap. - When calculating
BFCthe height, floating elements also participate in the calculation.
5. The role of BFC
1. Solve the high collapse
In a div with no height, a div set to float is nested, and the following situation will occur.
The outer div is highly collapsed. At this time, add an overflow: hidden css attribute to it , resulting in BFC.
This solves the problem of height collapse
2. Solve the problem of margin overlap
The three divs inside are all set with margin: 10px, but the distance between adjacent divs in the web page is also 10px. The reason is that sibling elements in the same BFC container will have vertical margin overlap, and two similar margins will be taken. The largest margin between adjacent elements is used as the interval between them.
This can be solved by wrapping each child element with a BFC container.
.bfc{
overflow: hidden;
} 
3. Prevent elements from being covered by floating elements
There are two div elements of the same level. The front div is set to left floating, which will cover the following elements.
At this time, the elements that are not floated can generate BFC to avoid being overwritten by floating elements.
Conclusion
The block formatting context is important for both float positioning and clearing floats. Float positioning and clearing floats will only be applied to elements within the same BFC. Floating will not affect the layout of elements in other BFCs, and clearing floats can only clear the floats of elements in front of it in the same BFC. Margin collapse will only occur between block-level elements belonging to the same BFC.
The above is the analysis of BFC. The concept of BFC is relatively abstract, but you should be able to better understand BFC through example analysis. In practice, the float can be closed using BFC. At the same time, due to the isolation effect of BFC, you can use BFC to contain an element to prevent margin collapse between this element and elements outside the BFC.