What is BFC and what is a good wife?

What is BFC and what is a good wife?

BFC Definition
The BFC (Block formatting context) literal translation is "Block-level formatting context ". It is a stand-alone rendering area with only Block-level box parameters. It specifies how the internal Block-level Box is laid out and has nothing to do with the outside of this area.
BFC layout rules:
The internal Box will be placed in the vertical direction, and placed one by one. The vertical distance of the Box is determined by margin. The margin of two adjacent boxes belonging to a BFC in the same region will generate the left side of the margin Box that overlaps each element, it is in contact with the left side of the border box containing blocks (for formatting from left to right, otherwise it is opposite ). This is true even if floating occurs. The BFC region does not overlap with the float box. BFC is an isolated stand-alone container on the worker page. The sub-elements of the worker in the container worker do not affect the elements of the external worker. And vice versa. Floating elements are also involved in the calculation when the height of the BFC Shard is calculated.
Second, what elements will be used to generate BFC?
Root element

The float attribute is not none.

Position is absolute or fixed

Display is inline-block, table-cell, table-caption, flex, inline-flex

Overflow is not visible

BFC is an isolated stand-alone container on the worker page. The sub-elements of the worker in the container worker do not affect the elements of the external worker. And vice versa.