preface

The interviewer has asked you so many times that you still don’t know the concept and function of BFC? It’s time to solidify the front end basics, and this article documents BFC concepts, trigger conditions, and some common examples of using BFC as a solution.

Landing the concept

Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where the layout process of Block boxes takes place and where floating elements interact with other elements.

We can think of it as a special attribute or skill that triggers the element of the BFC:

  1. Will have an independent layout space, will not be affected by the outside world.
  2. The ability to allow floating elements to interact with the layout without affecting the layout by floating elements.

How do I trigger the BFC

Extremely common to remember:

  1. The Html root tag itself triggers the BFC.
  2. Elements that enable floating trigger the BFC, where the float property is set to non-None (the default is None).
  3. Set overflow elements to trigger BFC, that is, the overflow property is set to non-visible (the default is visible)
  4. Elements that set absolute and fixed positions trigger the BFC, that is, the position property is set to absolute or fixed.
  5. The element that sets the elastic box or inline block element, that is, the display property is set to flex or inline-block.

All official trigger conditions:

BFC application scenario

Parent collapse

The reason for this is that a normal element has no height, and when all the elements in it float, the height of the parent element collapses without the element holding it up.

<style>
    #box1 {
        border: 5px solid red;
        background-color: aquamarine;
        width: 500px;
    }

    #box2 {
        border: 5px solid yellow;
        background-color: aqua;
        height: 50px;
        width: 250px;
        float: left;
    }
</style>
<body>
<div id="box1">
   <div id="box2"></div>
</div>
</body>
Copy the code

We know that the BFC elements can be laid out with floating elements in mind, so we can trigger the BFC with Box1.

<style>
    #box1 {
        border: 5px solid red;
        background-color: aquamarine;
        width: 500px;
        /* Set overflow to non-visible */
        overflow: hidden;
        /* If you are interested, try setting the inline element */
        /*display: inline-block; * /
        /* or set the float */
        /*float: left; * /
    }
</style>
Copy the code

Margin overlap

The top element has a 30px bottom margin and the bottom element has a 40px top margin. We wanted it to be 70px apart, but because the margins overlap, we only kept the maximum spacing of 40px.

<style>
    #box1 {
        border: 5px solid red;
        background-color: aquamarine;
        width: 500px;
        height: 50px;
        margin-bottom: 30px;
    }

    #box2 {
        border: 5px solid yellow;
        background-color: aqua;
        height: 50px;
        width: 250px;
        margin-top: 40px;
    }
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
Copy the code

We wanted the internal layout of the element that triggered the BFC to be unaffected by external influences, so we thought we could create a BFC element that included one of the elements within it so that it would not be affected by the other element.

<body>
<div id="box1"></div>
<div id="bfc" style="overflow: hidden">
    <div id="box2"></div>
</div>
</body>
Copy the code

Floating elements overlap normal elements

Because box1 floats, box2 and Box1 overlap.

<style>
    #box1 {
        border: 5px solid red;
        background-color: aquamarine;
        width: 500px;
        height: 50px;
        float: left;
    }

    #box2 {
        border: 5px solid yellow;
        background-color: aqua;
        height: 80px;
        width: 250px;
    }
</style>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
Copy the code

In the same way as with height collapse, a BFC is triggered, so we trigger a BFC for Box2.

<style>
    #box2 {
        border: 5px solid yellow;
        background-color: aqua;
        height: 80px;
        width: 250px;
        / * * / set
        overflow: hidden;
    }
</style>
Copy the code

Stern said

If you feel that the article is good, welcome to like collection oh, what mistakes or suggestions can also leave a message, thank you ~