Element's BFC attribute

BFC is the abbreviation of Block Formatting Context

When an element has the BFC attribute enabled, the element will become an independent area, it will not affect other elements, so the layout will not be cluttered.

Characteristics when elements enable BFC

1. The vertical margin of the parent element will not overlap with the child element (to solve the problem of overlapping parent and child margins)

We talked about the problem of overlapping parent and child margins earlier. At that time, we said that the BFC attribute can be turned on

2. Elements with BFC enabled will not be covered by floating elements

3. Elements with BFC enabled can contain floating child elements (which can solve height collapse)

The previous article explained the problem of height collapse in detail, you can go and see it.

How to turn on BFC

1. Set the element to float (not recommended)

Although the parent element can be stretched, it will cause the width of the parent element to be lost, and this method will cause the element below to move up, affecting the page layout

2. Set the display property to inline-block (not recommended)

Can solve the problem of height loss, but will result in loss of width, and there will be three pixels of white space

3. Set the element's overflow attribute to a non-visible value (recommended)

Generally use the hidden attribute value, there will be a three-pixel blank problem

The side effects are relatively small, it is recommended to use

4. Set element absolute positioning (not recommended)