1. Concept:
BFC (Block Formatting Context): Block formatting context. It is an independent rendering area, and only the Block-level box is involved. It specifies how the internal Block-level Box is laid out, and has nothing to do with the outside of this area.
(Note: block-level box: elements whose display attributes are block, list-item, and table will generate block-level box)
2. Nature:
1. When calculating the height of the BFC, floating elements will also participate in the calculation.
2. The inner boxes will be placed one after another in the vertical direction.
3. The vertical distance of the box is determined by the margin. The margins of two adjacent boxes belonging to the same BFC will overlap.
4. The BFC area will not overlap with the float box.
5. BFC is an isolated and independent container on the page, and the child elements inside the container will not affect the outside elements. The reverse is also true.
Three, build (satisfy one of them)
1. The value of float is not none.
2. The value of position is not static or relative.
3. The value of display is inline-block, table-cell, flex, table-caption or inline-flex
4. The value of overflow is not visible
Four, role
1. Use BFC to avoid overlapping margins.
2. Adaptive two-column layout.
3. Clear the float.
4. Prevent elements from being covered by floating elements.