What is BFC?

There are some concepts that need to be understood before we can explain them:

The Box (Box)

Box is the basic unit of a page, and an interface can be composed of multiple Box elements. The element type (block-level vs. line-level) and display attribute determine the type of Box. Different types of boxes involve Formatting Context (a container that decides how to render the document), so the elements inside the Box are rendered in different ways. Box is currently divided into the following types:

  • block-level

    Box: displays elements with block, list-item, and table attributes, generating block-level boxes. And participate in block Formatting context;Copy the code

  • Inline-level box: An element whose display attribute is inline, inline-block, inline-table generates an inline-level box. And participates in inline formatting context;

  • Run-in box: The element whose display attribute is run-in generates the run-in level box. The behavior of the run-in box is as follows: 1. If the run-in box contains a block box, the run-in box becomes a block box. 2. If the next sibling of a run-in box is a block box (non-floating, non-absolutely positioned), the run-in box becomes the first inline box of the block box. A run-in cannot be inserted into a block that is itself a run-in, or into a block that already has a run-in. 3. Otherwise, the run-in box becomes a block box.

    Browser support: IE8+, Chrome (unsupport)

    style .run-in-box {display: run-in; }

    html:

    <h2>case 1</h2> <div class="run-in-box"> <p>some text... </p> </div> <div>some other text.... </div> <h2>case 2</h2> <h3 class="run-in-box">A run-in heading.</h3> <p>And a paragraph of text that follows it.</p> <h2>case 3</h2> <h3 class="run-in-box">A run-in heading.</h3> <span>And a span of text that follows it.</span>Copy the code

Formatting context

Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements. The most common Formatting contexts are Block fomatting context (BFC) and Inline Formatting context (IFC).

Landing the definition

Block formatting context (BFC). It is a separate rendering area, with only block-level box participation, which dictates how the internal block-level box is laid out and has nothing to do with the outside of the area.

BFC layout rules:

  1. The internal boxes will be placed vertically, one on top of the other.
  2. The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap
  3. 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.
  4. The region of the BFC does not overlap with the float box.
  5. 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.
  6. When calculating the height of the BFC, floating elements are also involved

Which elements generate BFC?

  • The root element
  • The float property is not None
  • Position is absolute or fixed
  • Display inline-block, table-cell, table-caption, flex, inline-flex
  • The overflow is not visible

Functions and principles of BFC 1. Adaptive two-column layout

Code:

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>
Copy the code

page

According to Article 3 of the BFC layout rules:

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.

Thus, although there is a floating element aslide, the left side of main still touches the left side of the containing block.

According to Article 4 of the BFC layout rules:

The region of the BFC does not overlap with the float box.

We can implement an adaptive two-column layout by triggering Main to generate a BFC.

.main {
    overflow: hidden;
}
Copy the code

When main generates the BFC, the new BFC does not overlap with the floating aside. So it will automatically narrow depending on the width of the contained block, and the width of the aside. The effect is as follows:

2. Clear internal floating information

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
Copy the code

page

According to article 6 of the BFC layout Rules:

When calculating the height of the BFC, floating elements are also involved

To clear the internal float, we can trigger the PAR to generate a BFC, so that when the PAR calculates the height, the float element child inside the PAR participates in the calculation. Code:

.par {
    overflow: hidden;
}
Copy the code

Effect:

3. Avoid vertical margin overlap

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>
Copy the code

page

The distance between the two p’s is 100px, sending a margin overlap. According to rule 2 of the BFC layout:

The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap

We can wrap a container around p and trigger it to generate a BFC. Then the two P’s do not belong to the same BFC, and margin overlap will not occur.

code

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>
Copy the code

The effect is as follows:

Another situation

<style>
        .box6{
            background: orange;
            height: 200px;
            width: 600px;
        }
        .box6-c{
            height: 100px;
            width: 100px;
            background: black;
            margin-top: 80px;
        }
</style>

<body>
<div class="box6">
    <div class="box6-c"></div>
</div>
</body>
Copy the code

The renderings are as follows:The maring margin of the inner child is 0 from the parent; According to article 5 of the BFC Rules:

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.

We can trigger the BFC for the parent box, so that the parent is a separate container, not affected by external elements; Code:

.box6 {
    overflow: hidden;
}
Copy the code

The renderings are as follows:

conclusion

In fact, the above examples all reflect the fifth rule of BFC layout:

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.

Since the elements inside and outside the BFC absolutely do not affect each other, when there is a float outside the BFC, it should not affect the layout of the Box inside the BFC, and the BFC will narrow without overlapping with the float (both ends of the layout). Similarly, when there is a float inside the BFC, the BFC calculates the height of the float so as not to affect the layout of the external elements. The same goes for avoiding margin overlap.