BFC in CSS you should know

The document flow we often say is actually divided into location flow, floating flow and ordinary flow. Normal flow is the FC of BFC. FC is a rendering area in a page that has a set of rendering rules that determine how its sub-elements are positioned and how they relate to and function with other elements. Common FCS include BFC, IFC, GFC and FFC. A BFC is a block formatting context, which is a render area used to layout block boxes.

In simple terms, a BFC is actually a region in which certain rules are followed, a unique set of rendering rules.

We often say that the parent element triggers the BFC, but in fact the area in which the element is located is subject to the BFC’s rendering rules.

So what exactly are the BFC rendering rules?

How BFC works (BFC rendering rules)

1) The margins of elements in the BFC area will overlap

This is the same with external elements, which overlap occurs if adjacent elements or parent elements within the BFC meet the conditions for margin overlapCopy the code

2) Elements in the BFC region do not overlap with floating elements

Elements inside the BFC do not overlap external floating elementsCopy the code

3) When calculating the height of the BFC area, the floating element is also involved in the calculation

Clear float principle, float element can also open the box, which is why the parent element can solve the height collapse of the parent element by triggering the BFC.Copy the code

4) THE BFC region is like a container, the inside elements do not affect the outside, and the outside elements do not affect the inside.

Resolve margin overlap between parent and child elements.Copy the code

5) The arrangement of elements inside the BFC area is consistent with that of external elements, and also follows the rules that block elements occupy a line and block elements within a line do not occupy a line.

How do I create a BFC

Generally speaking, the triggering BFC is for the element. After the element triggers the BFC, the region it is in becomes a BFC region. Creating a BFC is for the BFC itself, because it is a region, so it is created.

Float is not None, and the region of the floating element is a BFC region.

The region of an element whose position is not static or relative is a BFC region

The area where the table cell element displayed as table-cell resides is also a BFC area

The area where overflow elements are not visible is also a BFC area

Here are the ways MDN lists how to create a BFC

Root element (HTML) (The area where an HTML element is located is a BFC area, so we usually write elements that are rendered in a BFC area. There are a lot of things that should be done in this way, so you can understand some of them.)
Float element (element’sfloatnotnone)
Absolutely locate the element (element’sposition 为 absolute 或 fixed)
Inline block elements (of elementsdisplay 为 inline-block)
Table cells (elementdisplayfortable-cell, HTML table cells default to this value)
Table title (element’sdisplay 为 table-caption, the HTML table title defaults to this value.)
Anonymous table cell element (element’sdisplayforTable, ` ` table row,Table -row-group, ' 'table-header-group,' 'table-footer-group(default attributes for HTML table, row, tBody, thead, and tfoot, respectively) orinline-table)
overflowValues are not forvisibleThe block element
displayA value offlow-rootThe elements of the
containA value oflayout,contentOr paint elements
Elastic element (displayforflex 或 inline-flexThe immediate child of the element)
Grid elements (displayforgrid 或 inline-gridThe immediate child of the element)
Multi-column containers (of elementscolumn-count 或 column-widthDon’t forAuto, including ' 'column-count 为 1)
column-span 为 allThe element always creates a new BFC, even if the element is not wrapped in a multi-column container (Standard change.Chrome bug).

Verify and apply BFC rules

Next, verify each of the above rules with examples and explain how they are applied in practice.

Rule 1 the margins of elements in the BFC region overlap

Margin overlap also occurs if the conditions of margin overlap are met for elements in the BFC region as well as external elements. I don’t know if you noticed that in the way MDN lists how to create a BFC, the first one says that an HTML element is a BFC, so the elements we write on the page are actually in the BFC area. This is what happens to the external elements (which are also in the BFC region), and of course the same thing happens to the elements in the BFC region.

For example, in the following code, two article elements have a top margin of 10 px and a bottom margin of 40px, but when they are displayed on the page, the margins overlap and the margins become a larger 40px.

Even if the parent element SEC triggers the BFC, the elements inside the BFC will still have margin overlap, which verifies the first rule of BFC rendering above: elements inside the BFC region will have margin overlap.

  <section id = 'sec'>
    <style media="screen">
      #sec {
        background: yellowgreen;
        overflow: hidden;
      }
      .art1 {
        height: 100px;
        margin: 10px auto 40px;
        background: pink;
      }
      .art2 {
        height: 100px;
        margin: 10px auto 40px;;
        background: rgb(202.24.178);
      }
    </style>
    <article class='art1'>
    </article>
    <article class='art2'>
    </article>
  </section>
Copy the code

Eliminating margin overlap is as simple as giving Article2 a parent and firing the BFC.

  <section id = 'sec'>
    <style media="screen">
      #sec {
        background: yellowgreen;
        overflow: hidden;
      }
      .wrapper {
        overflow: hidden;
      }
      .art1 {
        height: 100px;
        margin: 10px auto 40px;
        background: pink;
      }
      .art2 {
        height: 100px;
        margin: 10px auto 40px;;
        background: rgb(202.24.178);
      }
    </style>
    <article class='art1'>
    </article>
    <div class='wrapper'>
      <article class='art2'>
      </article>
    </div>
  </section>
Copy the code

Rule two: Elements in the BFC region do not overlap external floating elements

In the code below, the.art1 and.art2 elements are adjacent.

Art1 is the pink float element to the left, and the.art2 element will appear below and overlap the float element.

  <section id = 'sec'>
    <style media="screen">
      #sec {
        background: yellowgreen;
        overflow: hidden;
      }
      .wrapper {
        /* overflow: hidden; * /
      }
      .art1 {
        float: left;
        height: 100px;
        width: 100px;
        background: pink;
      }
      .art2 {
        height: 200px;
        background: rgb(202.24.178);
      }
    </style>
    <article class='art1'>
    </article>
    <div class='wrapper'>
      <article class='art2'>
      </article>
    </div>
  </section>
Copy the code

We now let the.art2 element trigger the BFC, adding overflow: hidden to the.wrapper element. The results are shown below:

You can see that when the ART2 element triggers the BFC, it does not overlap with the float element.

Rule 3 When calculating the height of the BFC region, the float element is also involved in the calculation (Application: Clear float)

The main problem caused by floating is that the floating element in the parent element does not participate in the height calculation, so the height of the parent element collapses. This rule makes the floating element also participate in the height calculation of the parent element, so this rule is also the principle of clearing floating.

Now float the.art1 element left. As you can see from the figure below, the height of the parent element section is 0, indicating that the floating element is not involved in the height calculation.

  <section id = 'sec'>
    <style media="screen">
      #sec {
        background: yellowgreen;
      }
      .art1 {
        float: left;
      }
    </style>
    <article class='art1'>I'm a floating element</article>
  </section
Copy the code

Now make the parent element section trigger the BFC (for example, you can add overflow: Hidden to the parent element to trigger the BFC). The result is shown below.

Now you can see that the parent element has a height.

Rule 4: A BFC region is like a container, the inside elements do not affect the outside, and the outside elements do not affect the inside (application: eliminate margin overlap).

The margin-bottom of the.blue element is 12px, and the margin-top of the.red-inner element is 10px. At this point, as shown in the figure below, the margin between the.blue element and the.red-outer element is 12px, and the margin-top of the.red-inner element does not work, causing margin collapse.

  <section id = 'sec'>
    <style>
      .blue {
        height: 50px;
        margin-bottom: 12px;
        background: blue;
      }
  
      .red-outer {
        background: red;
      }

      .red-inner {
        height: 50px;
        margin-top: 10px;
      }
    </style>
    <div class="blue">blue</div>
    <div class="red-outer">
      <div class="red-inner">red inner</div>
    </div>
  </section>
Copy the code

Now let’s make the.red-outer element trigger the BFC (for example, we can add overflow: hidden to the parent element to trigger the BFC), with the result shown below.

When the BFC is triggered, the.red-outer element is a BFC region, using rule 4, the inner element and the outer element do not affect each other, the.red-inner element is the inner element, Therefore, it no longer coincides with the margin of the parent element.red-outer. So now its margin-top 10px is relative to the parent element, and since the width of the parent element is spread by it, the height of the parent element is now 60px.

Rule 5 The arrangement of elements inside the BFC area is the same as that of external elements. It also follows the rules that block elements occupy a row and block elements within a row do not occupy a row.

This has already been mentioned, the first thing that triggers a BFC in MDN is an HTML element, and the area where the HTML element is visible is a BFC area. Therefore, the internal and external elements of the BFC region behave the same and follow the rules that block elements occupy a row and block elements within a row do not occupy a row.

How BFC works (BFC rendering rules)

How do I create a BFC

Verify and apply BFC rules

Rule 1 the margins of elements in the BFC region overlap

Rule two: Elements in the BFC region do not overlap external floating elements

Rule 3 When calculating the height of the BFC region, the float element is also involved in the calculation (Application: Clear float)

Rule 4: A BFC region is like a container, the inside elements do not affect the outside, and the outside elements do not affect the inside (application: eliminate margin overlap).

Rule 5 The arrangement of elements inside the BFC area is the same as that of external elements. It also follows the rules that block elements occupy a row and block elements within a row do not occupy a row.

Related Posts

It’s the Promise chain that solves callback hell, not just promises

Front-end Http (Basic Introduction)

Generate random strings in the browser environment