preface

There seems to be a bit of clickbait 🤣.

It doesn’t matter, review recently, also was to finally understand the thing that knew a little before.

Let’s do a replay here.

When I first learned BFC, I saw a saying that some problems are triggered by BFC and solved by BFC.

It’s kind of confusing. Just remember that. Read on.

Introduction to the

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 are BFC, IFC (line-level formatting context), GFC (grid layout formatting context), and FFC (adaptive formatting context), which will not be expanded here.

What is BFC?

BFC stands for Block Formatting Context.

One wonders, what is the block-level formatting context?

The BFC is part of the visual CSS rendering of a Web page, the area where the layout process of a block box takes place, and where floating elements interact with other elements.

In plain English, he is a rule.

What are the rules of the BFC?

  • The internal boxes will be placed vertically, one on top of the other. Margins of two adjacent boxes belonging to the same BFC will overlap
  • The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.
  • The region of the BFC does not overlap with the float box. (Clear float)
  • A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa. (Solve margin collapse)
  • When calculating the height of the BFC, floating elements are also involved in the calculation (solve the parent height collapse).

What is the same BFC?

The BFC contains all the child elements that created the context element, but not the inner element of the child element that created the new BFC.

<div id='div_1' class='BFC'>
    <div id='div_2'>
        <div id='div_3'></div>
        <div id='div_4'></div>
    </div>
    <div id='div_5' class='BFC'>
        <div id='div_6'></div>
        <div id='div_7'></div>
    </div>
</div>
Copy the code

By definition, #div_1 creates a block format context that includes #div_2, #div_3, # DIV_4, #div_5. Since #div_5 creates a new BFC, #div_6 and #div_7 are excluded from the outer BFC.

When is a BFC triggered?

  • The root element (<html>)
  • Float tonone
  • The position offixed/absolute
  • Overflow is notvisible
  • Inline elements:Display: inline - block
  • Table elementDisplay: Table-cell /table-caption /table-cell/table/table-row/ table-row-group/table-header-group/table-footer-group
  • Elastic elements (display is a direct child of flex or inline-flex elements)
  • Grid elements (display is grid or a direct child of the inline-grid element)

The application of the landing

Application 1: Solve father-son margin collapse

<div class="parent">
   <div class="child"></div>
</div>
Copy the code
.parent {
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    margin-top: 20px;
}

.child {
    width: 100px;
    height: 100px;
    background-color: lightseagreen;
    margin-top: 40px;
}
Copy the code

After we wrote this, we realized that the father went with his son. Hahaha. The renderings are as follows

Here is the key to say why to solve?

According to the rules of BFC, only two adjacent boxes in the same BFC will have margin overlap. Break the rule and you’re done. But some people may question, obviously the father is still carrying his son, this is not the same BFC? What is the same BFC😄

In fact, the father and son are not the same BFC

For the two vertically placed brother boxes, set margin-bottom on the top and margin-top on the bottom. At this time, margin overlap will also occur. At this time, we choose to set only one.

add

Margin overlap calculation rules

  • To officially enroll great
  • With negative or small
  • You take the sum of one plus one minus

Application 2: Floating model

When the box is set float: left/right, it becomes a floating element. These element queue boundaries are parent boundaries.

.father{
    border: 5px solid black;
    width: 300px;
  }  
.son1{
    border: 5px solid #f66;
    width: 100px;
    height: 100px;
    float: left;

}
.son2{
    border: 5px solid #f66;
    width:100px;
    height: 100px;
    float: left;
}
Copy the code

Reason: Floating elements produce floating flows. All elements that produce floating flows are invisible to block-level elements, but the element and text element class attributes that produce BFC (inline) and text are visible to floating elements. Solution:

  • Clear floating flow

The last child element is added

p{
clear:both;
}
Copy the code

Pseudo-element cleanup float:

.father::after {
    content: ' ';
    display: block;
    clear: both;
}
Copy the code

Explain why we use display:block?

Clear is special and must be a block-level element for it to work, while ::after is a row-level element

  • Trigger the parent BFC internally to convert the element to inline-block, allowing the parent element to “see” the floating element, and solve the problem. This is actually the last feature that applies to layout rules: when calculating the height of the BFC, the floating element also participates in the calculation.