How to clear floating, and how does it work?

It's easy to clear floats , But the point of this question is BFC,BFC It is also the basic knowledge that must be tested

• ::after / <br> / clear: both
• Create parent  BFC(overflow:hidden)
• The parent sets the height

BFC （ Block level formatting context ）, Is a separate rendering area , Let be in   BFC  Internal elements are isolated from external elements , So that the positioning of internal and external elements will not affect each other .

The trigger condition :

• Root element
• position: absolute/fixed
• display: inline-block / table
• float  Elements
• ovevflow !== visible

The rules :

• Belong to the same  BFC  Two adjacent  Box  Arrange vertically
• Belong to the same  BFC  Two adjacent  Box  Of  margin  Overlap will occur
• BFC  The area of  float  The element areas of overlap
• Calculation  BFC  Altitude time , Floating child elements are also involved in the calculation
• Text layers are not covered by floating layers , Surround yourself