Clear floating clear/BFC

There are two methods to clear floating: 1. Clear

Clear: Both/left/right;

Ii. Create BFC

(1) What is BFC?

BFC is a block-level formatting context. It is an independent rendering area and only involves block-level box. It specifies how the internal block-level box is laid out, it is irrelevant to the outside of this region. In general, it is equivalent to a container that boxes floating elements and isolates them,The sub-elements in the container do not affect the external elements,So that the floating will not overflow.

(2) What elements will generate BFC?

① Root element or other elements containing it

② The float value is not none.

③ The value of overflow is not visible.

④ The value of display is inline-block/table-cell (table cell)/table-caption (Table title)/flex/inline-flex

⑤ Position value: absolute/fixed

(3) What are the functions of BFC?

BFC can be used in additionClear floating, Can also be usedPrevent margin folding,Left and right columnsThese two functions.

Clear floating clear/BFC