BFC block level formatting context

BFC The understanding of the

• Block level formatting context
• Only Block box Participate in
• It has nothing to do with the outside , Have your own set of rendering rules

Application scenarios

• solve Sub elements float , Parent element height collapse problem
• Cancel the box margin Collapse problem ( Child element set to margin-top, Both parent and child elements will be together margin-top（ solve ： Add... To the parent element overflow）)

• Prevent being overwritten by floating elements ( Brother element floating , The following elements are not floating ( solve : Add overflow), The following elements will be covered by the previous floating elements )
  

How to create BFC

• float Not for none
• display by inline-block flex by inline-flex
• position Not for static or relative
• overflow：hidden（ best ）