BFC is the block-level formatting context. The box in the ordinary stream belongs to a formatting box, and the type can be block or inline.
But not both. And block boxes are formatted in the block formatting context, and inline boxes are formatted in the inline formatting context. Any rendered element belongs to a box, either block or inline.
The general performance rules are divided into the following situations:
1. In the element where the BFC is created, its child elements are placed one after another according to the document flow. In the vertical direction, their starting point is the top of a containing block, and the vertical distance between the two adjacent elements depends on the margin characteristics.
2. In BFC, the left outer edge of each element touches the left side of the containing block. The same is true for timely floats. Unless this element also creates a new BFC.
3. BFC is an independent administrative area of the page. All browsers will place the BFC in the remaining space of the row where the floating element is located.
BFC can be generated when HTML meets any of the following conditions: float is not none, overflow is not hidden, display is any of table-cell, table-caption, and inline-block.
The Position value is not relative or static. Usually we use BFC in order not to overlap with floating elements. Clear internal floating elements. Solve the overlap when the upper and lower elements are adjacent.