BFC features in CSS are block rendering rules introduced in the CSS 2.1 specification to help us deal with issues such as layout in a page. For example, in a clear float scheme we can add overflow: Hidden to the parent container, which takes advantage of the BFC feature. It’s also a common interview question, so it’s important to have a deep understanding of the BFC.

What is landing

BFC is short for Block Formatting Context. It can be understood as a block rendering area that applies some rendering rules, and it is a boundary in the CSS world. The reason for this is that the elements under the container that triggered the BFC feature are completely isolated from the elements outside the container, and the layout of the child elements does not affect the elements outside the container, and vice versa.

BFC elements have the following characteristics:

  • BFC blocks do not overlap floating blocks

  • Float elements are included when calculating the height of BFC elements

  • Block margins under one BFC will overlap, but not in the same BFC

  • A BFC element is a separate container that separates the inside elements from the outside elements, complementing each other’s influence

Trigger landing

The BFC feature of a block element can be triggered by setting:

  • The value of float is not None

  • Overflow values are auto, Scroll, and hidden

  • The display values are table-cell, table-caption, and inline-block

  • Position is set to Absolute and Fixed

In addition, the HTML element itself is a BFC element by default

Application scenarios

Remove the floating

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
Copy the code
.box {
    background: #eee;
}
.left {
    width: 200px;
    height: 200px;
    float: left;
    border: 1px solid pink;
}
.right {
    height: 100px;
    border: 1px solid greenyellow;
}
Copy the code

The effect is as follows:

As you can see, the floating element.left is out of the normal flow and overlaps with the element.right. And the height of the parent container does not contain floating elements, so it collapses.

Using feature 2 of the BFC element, the BFC feature is triggered in containers containing floating elements to prevent the height of the container from collapsing. This is usually triggered by setting Overflow :hidden as follows:

.box {
    background: #eee;
    /* Trigger BFC */
    overflow: hidden;
}
Copy the code

The effect is as follows:

Adaptive layout

Using feature 1, we can trigger the BFC feature on.right so that it does not overlap with the floating element on the left, ensuring that the child element is not affected by external influences. And because. Right is a block element, it has fluid properties and ADAPTS to the viewport width, thus achieving two-column adaption, or even multiple columns.

.right {
    height: 100px;
    border: 1px solid greenyellow;
    overflow: hidden;
}
Copy the code

The effect is as follows:

However, this scheme does not work for scenarios where content needs to be displayed beyond the.right area. The BFC feature can be triggered using table-cell and inline-block.

.right { display: table-cell; width: 9999px; height: 100px; border: 1px solid greenyellow; */ *display: inline-block; *width: auto; }Copy the code

A feature of the cell box is that when the width is set to be larger than the parent container, the actual width will not be larger than the parent container, which is the same as the adaptive effect. So we gave the width an extra large value. However, table-cell is only used in IE8+ browsers. For IE7, inline-block can be set, which will behave like block boxes on IE7.

Other conditions that trigger the BFC feature have their own constraints, so the above two schemes are commonly used to trigger it

Preventing margin merging

We know that two adjacent block boxes will have margin merge, whichever is the largest. So using BFC feature 3, let one of the block boxes be included in a new BFC container, so that they are isolated from each other and not affected.

Refer to the article

CSS provides an in-depth understanding of multi-column adaptive layout with fluid and BFC features

Learning Block Formatting Context (BFC)

The most comprehensive and thorough analysis of BFC principle in history