What is a block-level formatting Context (BFC)?

BFC is a special box, no difference from ordinary boxes in style, but in function, BFC is regarded as an isolated container, the layout of the elements inside does not affect the outside elements, BFC boxes have special functions that ordinary boxes do not have, such as floating elements and solve the problems of margin collapse.

How do I create a formatting context?

  1. Float elements (float of elements is not None);
  2. Absolute positioning elements (the element’s position is absolute or fixed);
  3. Element whose overflow value is not visible;
  4. The element whose display value is flow-root;
  5. Display inline-block, table-cell, table-caption, table, table-row, table-row-group, table-header-group, table-footer-group Inline-table, inline-flex, inline-grid.

An 🌰

<! DOCTYPE html><html lang="en">
  <head>
    <style type="text/css">
      .red-outer {
        border: 1px solid #aaa;
        width: 300px;
      }
      .red-inner {
        float: left;
        border: 1px solid pink;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="red-outer">
      <div class="red-inner">red inner</div>
    </div>
  </body>
</html>
Copy the code

<! DOCTYPE html><html lang="en">
  <head>
    <style type="text/css">
      .red-outer {
        border: 1px solid #aaa;
        width: 300px;
        overflow: hidden; / * look here * /}.red-inner {
        float: left;
        border: 1px solid pink;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="red-outer">
      <div class="red-inner">red inner</div>
    </div>
  </body>
</html>
Copy the code

When the child element is set to float, the parent element is unwrapped. At this point, we set the overflow of the parent element to hidden and create a formatting context in the parent element so that the parent element can properly wrap the child element to achieve the desired effect. It’s best to comment the code here, though, because other developers may not know overflow: Hidden; The function here. You can also use other methods to create formatting contexts.

The display: flow-root command is recommended. Because the value of this element is set specifically for the BFC, it has no side effects and is highly readable.

Another common use of BFC is to solve the problem of margin collapse, so let’s look at that.

1. Margin collapse of parent and child elements

<! DOCTYPE html><html lang="en">
  <head>
    <style type="text/css">
      .red-outer {
        width: 300px;
        background: pink;
        /* overflow: hidden; * /
      }
      .inner1..inner2 {
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <div class="red-outer">
      <div class="inner1">inner1</div>
      <div class="inner2">inner2</div>
    </div>
  </body>
</html>
Copy the code

A collapse occurs between the upper and lower margins of the parent and child elements, causing the upper margin of inner1 and the lower margin of inner2 to disappear.

The solution is to create a BFC

<! DOCTYPE html><html lang="en">
  <head>
    <style type="text/css">
      .red-outer {
        width: 300px;
        background: pink;
        overflow: hidden;
      }
      .inner1..inner2 {
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <div class="red-outer">
      <div class="inner1">inner1</div>
      <div class="inner2">inner2</div>
    </div>
  </body>
</html>
Copy the code

Note: margin collapse only occurs on upper and lower margins, not left and right margins.

2. Margin collapse of the same elements

<! DOCTYPE html><html lang="en">
  <head>
    <style type="text/css">
      .red-outer {
        width: 300px;
        background: pink;
      }
      .inner1 {
        margin-bottom: 30px;
      }
      .inner2 {
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="red-outer">
      <div class="inner1">inner1</div>
      <div class="inner2">inner2</div>
    </div>
  </body>
</html>
Copy the code

Because of margin collapse between elements of the same level, the margin between inner1 and inner2 is only 50px.

The solution is to create BFC

<! DOCTYPE html><html lang="en">
  <head>
    <style type="text/css">
     .red-outer {
        width: 300px;
        background: pink;
      }
      .inner1 {
        margin-bottom: 30px;
      }
      .inner2 {
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="red-outer">
      <div class="inner1">inner1</div>
      <div style="overflow: hidden">
        <div class="inner2">inner2</div>
      </div>
    </div>
  </body>
</html>
Copy the code

3. Margin collapse of empty elements

<html lang="en">
  <head>
    <style type="text/css">
      .red-outer {
        width: 300px;
      }
      .red-outer {
        width: 300px;
      }
      .inner1 {
        background: gray;
        height: 100px;
        margin-bottom: 5px;
      }
      .inner2 {
        background: yellow;
        margin-top: 20px;
        margin-bottom: 10px;
      }
      .inner3 {
        background: deepskyblue;
        margin-top: 15px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="red-outer">
      <div class="inner1">inner1</div>
      <div class="inner2">inner2</div>
      <div class="inner3">inner3</div>
    </div>
  </body>
</html>
Copy the code

The margin of the empty element in the middle, that is, the element with no height set, collapses. The solution is also BFC.

<html lang="en">
  <head>
    <style type="text/css">
      .red-outer {
        width: 300px;
      }
      .red-outer {
        width: 300px;
      }
      .inner1 {
        background: gray;
        height: 100px;
        margin-bottom: 5px;
      }
      .inner2 {
        background: yellow;
        margin-top: 20px;
        margin-bottom: 10px;
      }
      .inner3 {
        background: deepskyblue;
        margin-top: 15px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="red-outer">
      <div class="inner1">inner1</div>
      <div style="overflow: hidden">
        <div class="inner2">inner2</div>
      </div>
      <div class="inner3">inner3</div>
    </div>
  </body>
</html>
Copy the code

What does formatting context mean? (Why BFC exists)

  1. Formatting context is important for locating and cleaning floats. Float location and clear float can only work on elements in the same block-level formatting context. Floats do not affect the layout of elements in other BFC, and clearing floats only clears floats of elements before it in the same BFC.
  2. Solve the margin collapse problem.