BFC

1. The concept

This is just a general concept in CSS layout knowledge, not a deep one.

BFC is Block Formatting Context.

The first step is to understand what Formatting Context is. Formatting Context is a concept in the W3C CSS2.1 specification. It is a rendering area of a page with a set of rendering rules that determine how its children are positioned and how they interact with other elements.

BFC has an extra B, which is a box, so BFC is the rendering area of a box on a page, and it has its own set of rendering rules. Similarly, there is the concept of IFC, which refers to Inline formatting context, which is the rendered area of an Inline box.

It’s hard to really understand BFC just from the concept of BFC. You need to combine the features and applications of BFC, but you need to know how to create BFC first.

2. The trigger landing

A BFC can be created if any of the following conditions are met:

  1. Float element (element’sfloatnotnone)
  2. Absolutely locate the element (element’sposition 为 absolute 或 fixed)
  3. The display forflex,inline-block,table-cell,table-caption
  4. overflowComputed values (Computed) are notvisibleThe block element

There is no enumeration here, but all creation methods are listed in MDN.

The following are the features and applications of BFC.

3. BFC features and applications

  1. BFC can avoid margin merging
  2. BFC can contain floating elements (clear floating)
  3. The BFC prevents elements from being overwritten by floating elements

Here are some examples

BFC avoids margin merging

When the upper div sets the lower margin, and the lower div sets the upper margin, the two margins are combined to have a larger margin, as shown in Figure 4-1.

The code for margin merging is as follows:

<body>
  <div class="top">Brother up there</div>
  <div class="bottom">Below brothers</div>
</body>
  <style>
    div {
      width: 200px;
      height: 200px;
    }
    .top {
      background-color: red;
      margin-bottom: 100px;
    }
    .bottom {
      background-color: green;
      margin-top: 100px;
    }
  </style>
Copy the code

To prevent margin merging, place the two divs in a BFC container as follows:

  <div class="father">
    <div class="top">Top bunk buddy</div>
  </div>
  <div class="father">
    <div class="bottom">A lower berth brothers</div>
  </div>
  <style>
    .father {
      overflow: auto; / * trigger landing * /
    }
    .top..bottom {
      width: 200px;
      height: 200px;
    }
    .top {
      background-color: red;
      margin-bottom: 100px;
    }
    .bottom {
      background-color: green;
      margin-top: 100px;
    }
  </style>
Copy the code

Figure 4-2 shows the configuration result.

BFC contains floating elements (clear floating)

Floating elements deviate from the normal document flow, causing the parent element box to collapse, as shown in Figure 4-3.

The code for the collapse of the parent element box is as follows:

  <style>
    .father {
      border: 2px solid red;
    }
    .son {
      width: 200px;
      height: 200px;
      background-color: green;
      float: left;
    }
  </style>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
Copy the code

Trigger the BFC of the container, then the container will be wrapped around the floating element, resolve the collapse of the parent element box, code as follows:

Figure 4-4 shows the configuration result.

The BFC prevents elements from being overwritten by floating elements

In a parent element, there are two elements. When the left element floats, the right element moves to the position of the left element and is blocked by the left element, as shown in Figure 4-5.

The code that happens to be overwritten by a floating element is as follows:

  <style>
    .left {
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    .right {
      width: 300px;
      height: 300px;
      background-color: green;
    }
  </style>
<body>
  <div class="left">Brother on the left</div>
  <div class="right">Brother on the right</div>
</body>
Copy the code

In this case, the BFC feature of the right element can be triggered and overflow: hidden can be added to the style of the right element as follows:

  <style>
    .left {
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    .right {
      width: 300px;
      height: 300px;
      background-color: green;
      overflow: hidden;
    }
  </style>
<body>
  <div class="left">Brother on the left</div>
  <div class="right">Brother on the right</div>
</body>
Copy the code

Figure 4-6 shows the configuration.

4. To summarize

From the above three features and applications, it can be seen that elements with BFC characteristics can be regarded as isolated independent containers. The elements inside the container will not affect the layout of the elements outside, and BFC has some features that ordinary containers do not have.

Reference 5.

10 minutes Understanding the PRINCIPLE of BFC

Fast format context