CFC (Block Formatting Context) is the rendering and display rule for Block level elements

I. Easy to understand. Definition

You can think of the BFC as a big closed box, where the children inside the container don’t affect the outside elements, and the outside elements don’t affect the children inside our container.

2. BFC layout rules

 

  • The inner boxes will be placed vertically, one by one;
  • The upper and lower margins of two adjacent boxes belonging to the same BFC will overlap.
  • The left side of each element touches the left side of the contained box, even if there is a float;
  • The region of the BFC does not overlap with float;
  • The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements and vice versa
  • When calculating the height of the BFC, floating elements are also involved

Which elements generate BFC?

The BFC feature can be triggered if an element meets any of the following criteria:

  • Body root element;
  • Float element:floatDon’t fornoneAttribute value of;
  • Absolute positioning element:position (absolute,fixed)
  • The display is:inline-block,table-cell,flex
  • overflowIn addition tovisibleValues other than (hidden,auto,scroll)

What can generate BFC do?

Small make up generally commonly used overflow, the other four conditions can be used according to the situation

  • Solve margin overlap problem
  • Solve the floating height collapse problem
  • Solve the problem of encroaching on floating elements

So we start the BFC demo with three problems to solve

5. Function and principle of BFC

1. Adaptive two-column layout

    <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.Copy the code

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. The region of the BFC does not overlap with the float box. The region of the BFC does not overlap with the float boxCopy the code

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. Adaptive two-column cloth clearance internal floating code:

<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:

When calculating the height of the BFC, floating elements are also involvedCopy the code

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

The effect is as follows:

3. Prevent vertical margin overlapping code:

<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 overlapCopy the code

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:

&emsp; &emsp; <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:

Five, the summary

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. &emsp;Copy the code

 

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. 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.

If you think my article is good, please pay attention to the likes of the collection oh! We can also talk about front-end problems with VX

VX:dandanshen987
Copy the code