☠ what is BFC?

BFC stands for Block Formatting Context.

The effect is to keep the element that triggers the BFC in a completely separate space so that the layout of its children does not affect the layout of the outside elements.


☠ Trigger BFC method?

The BFC can be triggered as follows:

  • The root element<html>
    • This means that the entire HTML document is one big BFC container
  • floatThe value of thenone
  • positionThe value of thestaticorrelative
  • displayThe value oftable-cell,table-caption,inline-block,flex 和 inline-flexOne of them
  • overflowThe value of thevisible


☠ BFC features

The BFC features are as follows:

  • Internal block-level elements are stacked on top of each other and arranged down the page, while inline elements are juxtaposed with each other.
  • Elements in the same BFC influence each other, and margin overlap may occur.
  • When calculating the height of the trigger BFC element, the floating element also participates in the calculation.(Avoid parent element height collapse principle)
  • Floating elements do not overwrite triggering BFC elements.(Prevents elements from being overwritten by floating elements)
  • The element that triggers the BFC is in a completely separate space, so that the layout of its children does not affect the layout of the outside elements.(Principle of avoiding margin overlap)


☠ BFC application

1. Clear floats to avoid high collapse

Normal case (child element not set to float)

<style>
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 700px;
    margin-top: 50px;
    margin-left: 50px;
    background: #ccc;  / * * / gray
}

.left {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border: 3px solid orange;
    background: #73DE80;  / * * / green
}

.right {
    width: 400px;
    height: 100px;
    box-sizing: border-box;
    border: 3px solid orange;
    background: #F31264;  Red / * * /
}
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

In this case, the height of the parent element is the sum of the heights of the two child elements.


The left child element is set to float, causing the parent element to collapse in height:

<! -- Code differences -->
<style>
.left {
    float: left;
}
</style>
Copy the code

As you can see, the height of the parent element is the same as the height of the child element on the right, indicating that the height of the parent element does not include the height of the floating element in the calculation.


The parent element uses the BFC feature to clear the float so that it includes the float element when calculating the height

<! -- Code differences -->
<style>
.box {
    overflow: hidden;
}

.left {
    float: left;
}
</style>
Copy the code

The parent element takes advantage of the BFC’s nature by triggering the BFC to include floating elements when calculating the height.


2. Prevent elements from being overwritten by floating elements

In the example above, the height collapse problem is solved, but the floating left child overwrites the right child. This is not the desired layout, so how do we make two child elements side by side?

You can use point 4 of the BFC feature mentioned earlier (the floating element does not override the triggering BFC element) by simply having the right child element trigger the BFC.

<style>
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 700px;
    margin-top: 50px;
    margin-left: 50px;
    background: #ccc;  / * * / gray
    overflow: hidden;
}

.left {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border: 3px solid orange;
    background: #73DE80;  / * * / green
    float: left;
}

.right {
    width: 400px;
    height: 100px;
    box-sizing: border-box;
    border: 3px solid orange;
    background: #F31264;  Red / * * /
    overflow: hidden;
}
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

You can see that the two child elements are in a side-by-side state.

Note: If the parent element is not wide enough, the right child element is displayed in line breaks.


3. Avoid overlapping margins

By default, vertical margins overlap between adjacent boxes

<style>
.box {
    width: 400px;
    margin-top: 50px;
    margin-left: 50px;
    background: #ccc;  / * * / gray
}

.top..bottom {
    width: 200px;
    height: 200px;
    background: orange;
}

.top {
    margin-bottom: 20px;
}

.bottom {
    margin-top: 20px;
}
</style>

<body>
    <div class="box">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
Copy the code

The way we wrote it, the distance between the two boxes should be40pxYes, but the truth is only20px, indicating that their margins overlap.


The two boxes are placed in different BFC containers and have their own layout environment

<! -- Code differences -->
<style>
.bfc {
overflow: hidden;
}
</style>

<body>
    <div class="box">
        <div class="bfc">
            <div class="top"></div>
        </div>
        <div class="bfc">
            <div class="bottom"></div>
        </div>
    </div>
</body>
Copy the code

At this point, both boxes have their own layout environment and do not affect each other.

☠ Resources

Learn Block Formatting Context (JUejin. Cn)

Take you to understand the most comprehensive in the simplest way