First, the concept of BFC

1. Specification interpretation

Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where block-level boxes are generated during the layout process. It is also the limiting area where floating elements interact with other elements.

2. Popular understanding

  • The BFC is a standalone layout environment that can be understood as a container in which items are placed according to certain rules and do not affect items in other environments.
  • If an element meets the conditions that trigger the BFC, the layout of the elements in the BFC is not affected by external influences.
  • A float element creates a BFC, so the children inside the float element are mainly affected by the float element, so the two float elements are not affected by each other.

Second, create the BFC

  1. The root element or the element containing the root element
  2. Floating element float = left | right or inherit (indicates none)
  3. Absolute position = absolute or fixed element
  4. The display = the inline – block | flex | inline – flex | table – cell or table – caption
  5. Overflow = hidden | auto or scroll (indicates visible)

3. Characteristics of BFC

  1. The BFC is a standalone container, and children inside the container do not affect elements outside the container. And vice versa.
  2. The boxes are arranged vertically one after another from the top, and the vertical spacing between the boxes is determined by the margin.
  3. In the same BFC, the vertical margins of two adjacent block-level boxes overlap.
  4. The BFC region does not overlap with the float box.
  5. The BFC can recognize and include float elements, and when calculating the height of its region, float elements can also be included in the calculation.

Four, the role of BFC

1. Include float elements (clear float)

  • Floating elements can fall out of the document flow (as well as absolutely positioned elements), making it impossible to calculate the exact height, a problem known as height collapse.
  • The precondition for solving the high collapse problem is to be able to identify and include the floating elements, that is, to remove the floating elements.

As shown in the above left figure, the container has no height or height = auto, and its sibling element is a floating element, so the height of the container cannot be pushed open, that is, the height collapses.

Solution: Create a BFC in the container.

HTML

<div class="container">
        <div class="Sibling"></div>
        <div class="Sibling"></div>
</div>

CSS

.container { 
        overflow: hidden; /* creates block formatting context */ 
        background-color: green; 
} 
.container .Sibling { 
        float: left; 
        margin: 10px;
        background-color: lightgreen;  
}

Special Reminder:

  • Creating BFC through overflow:hidden can certainly solve the problem of high collapse, but it is definitely not the most appropriate to apply it in a wide range of layout, after all, overflow and hidden problems will be caused by overflow, especially the interaction effect with JS will affect.
  • We can use Clearfix to clear the float, which we won’t cover here, but for more information read the front end question Clearfix (Clearfix).

2. Causes margin folding

When the vertical margins of two adjacent boxes (which may be siblings or ancestors) meet, they will form a margin. The height of this margin is equal to the greater of the heights of the two folded margins.

HTML

<div class="Container"> 
    <p>Sibling 1</p> 
    <p>Sibling 2</p> 
</div>

CSS

.Container { 
    background-color: red; 
    overflow: hidden; /* creates a block formatting context */ 
} 
p { 
    background-color: lightgreen; 
    margin: 10px 0; 
}

The red Container contains two green siblings (P), and the red Container has overflow: hidden; A BFC has been created, resulting in margin folding.

Theoretically, the margin between two sibling elements should be the sum of the margins of the two elements (20px), but it is 10px. That’s what margin folding does.

2.1 Collapse margin values

  • When two adjacent margins are both positive, the folded margin is the larger of the two.
  • When two adjacent margins are both negative, the folded margin is the value with the largest absolute value of both.
  • When two adjacent margins are positive and negative, the folded margins are the sum of the two.

2.2 The condition of margin folding is that margins must be adjacent!

3. Avoid margin folding

This may sound a little confusing, since we discussed earlier the problem of margin folding caused by BFCs. However, it is important to remember that Margin collapsing only takes place between block-level elements that belong to the same BFC. If they belong to different BFCs, the margins between them will not fold. So by creating a different BFC, margin folding can be avoided.

Modify the previous example and add a third sibling element with the same CSS.

HTML

<div class="Container"> 
        <p>Sibling 1</p> 
        <p>Sibling 2</p> 
        <p>Sibling 3</p> 
</div>

The result will not change, the margins will be folded, and the three sibling elements (P) will be separated by 10px vertical distance. The reason is that all three sibling elements belong to the same BFC.

You can avoid margin folding by creating a different BFC.

HTML

<div class="Container"> 
        <p>Sibling 1</p> 
        <p>Sibling 2</p> 
        <div class="newBFC"> 
            <p>Sibling 3</p> 
        </div> 
</div>

CSS

.Container { 
            background-color: red; 
            overflow: hidden; /* creates a block formatting context */ 
} 
p { 
            background-color: lightgreen; 
            margin: 10px 0; 
}
.newBFC { 
            overflow: hidden; /* creates new block formatting context */ 
}

When the second and third sibling elements belong to different BFCs, there is no margin folding between them.

To read more