3 minutes to understand BFC

Introduction to BFC

BFC(Block Formatting Context) block level formatting context is a rendering area used to layout block level boxes.

Explanation on MDN BFC: BFC is a part of CSS visual rendering of Web pages. It is used to determine the layout of block boxes and an area of floating interaction range.

The scope of a BFC contains all the child elements that created the context element, but does not include the internal elements of the child elements that created the new BFC. This shows from the other side that an element cannot exist in two BFCs at the same time.

Elements with BFC characteristics can be regarded as isolated independent containers, and the elements in the container will not affect the external elements in layout

Generally speaking, BFC can be understood as a closed large box. The elements inside the box will not affect the outside no matter how many rivers and seas are overturned.

Formation of BFC

The BFC characteristic can be triggered as long as the element meets any of the following conditions:

  1. Root element (i.e. < HTML > tag)
  2. Floating element float is not none (left, right)
  3. Absolute positioning element position is not static or relative. (absolute, fixed)
  4. Block elements whose value of overflow is not visible (auto, scroll, hidden)
  5. The values of display are inline block, flex, grid, table, table cell, table caption

Characteristics of BFC

  1. The upper and lower margin s of two adjacent containers belonging to the same BFC will overlap (focus)
  2. When calculating BFC height, floating elements are also involved in the calculation (key points)
  3. The area of BFC will not overlap with the floating container (key)
  4. The containers in the BFC are arranged in sequence in the vertical direction
  5. The margin left of an element contacts the border left of its containing block
  6. BFC is a separate container, and the elements inside the container will not affect the elements outside the container

Note:

  • 1. 2. 3 it needs to be understood. Its features and functions will be demonstrated one by one with code below;
  • 4. 5 and 6 are basic phenomena, which can be understood literally without key explanation.

BFC characteristic demonstration

Feature 1: the upper and lower margin s of two adjacent containers belonging to the same BFC will overlap

<style type="text/css">
    .top {
        width: 100px;
        height: 100px;
        background: red;
        margin-bottom: 20px;
    }

    .bottom {
        width: 100px;
        height: 100px;
        background: blue;
        margin-top: 30px;
    }
</style>

<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>


Two divs belong to the same BFC (< HTML > root tag), so the upper and lower margin s overlap. The spacing between the two divs is the larger of the two (30px).
.

To solve the problem of overlapping upper and lower margin s, just make two div s not in the same BFC:

<style type="text/css">
    .top {
        width: 100px;
        height: 100px;
        background: red;
        margin-bottom: 20px;
    }

    .bottom {
        width: 100px;
        height: 100px;
        background: blue;
        margin-top: 30px;
    }

    .box {
        overflow: hidden;
    }
</style>

<body>
    <div class="top"></div>
    <div class="box">
        <div class="bottom"></div>
    </div>
</body>


By adding overflow: hidden to the parent of the blue block; Property so that. box triggers BFC.

At this time, the red block is in the BFC of the < HTML > root tag, and the blue block is in the BFC of the. box, which does not belong to the same BFC, so the upper and lower margin will not overlap.
.

Feature 2: when calculating BFC height, floating elements also participate in the calculation (can be used to clear floating)

<style type="text/css">
    .outside {
        border: 5px solid blue;
    }

    .inside {
        width: 100px;
        height: 100px;
        background: yellowgreen;
        float: left;
    }
</style>

<body>
    <div class="outside">
        <div class="inside"></div>
    </div>
</body>


Because the parent element. outside has no height and the child element. inside floats (out of the document flow), the parent element. outside will collapse in height.
.

To solve the problem of high collapse of parent element. outside, you can make parent element. outside trigger BFC:

<style type="text/css">
    .outside {
        border: 5px solid blue;
        overflow: hidden;
    }

    .inside {
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }
</style>

<body>
    <div class="outside">
        <div class="inside"></div>
    </div>
</body>


By adding overflow: hidden to the parent element. outside; Property so that the parent element. outside triggers the BFC.

The BFC feature stipulates that "the floating element is also involved in the calculation when calculating the BFC height". At this time, although the floating is set for the child element. inside, its height is still calculated into the parent element, so as to solve the problem of height collapse.

.

Feature 3: the area of BFC does not overlap with the floating container (can be used to achieve adaptive two column effect)

<style type="text/css">
    .left {
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }

    .right {
        height: 200px;
        background: blue;
    }
</style>

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>


Because the element. left is set to float (out of the document flow), the element. right overlaps it.

To solve the overlapping problem of element. right, you can trigger BFC with element. right:

<style type="text/css">
    .left {
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }

    .right {
        height: 200px;
        background: blue;
        overflow: hidden;
    }
</style>

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>


By adding overflow: hidden to the element. right; Property so that the element. right triggers the BFC.

The BFC feature stipulates that "the BFC area will not overlap with the floating container". At this time, although the element. left is set to float (out of the document), the element. right has the BFC feature and will not overlap with the. left floating element, which can realize the adaptive two column effect.

Tags: Javascript

Posted on Tue, 30 Nov 2021 01:28:15 -0500 by begeiste