What is BFC? What problems can BFC solve

One 、 Normative interpretation ： Block formatting context （Block Formatting Context,BFC） yes Web Visualization of the page CSS Part of the rendering , It's the area where block level boxes are generated during layout , It is also a restricted area for interaction between floating elements and other elements

Two 、 Easy to understand ：BFC It's a Independent layout environment , It can be understood as a container , Place items in this container according to certain rules , And it doesn't affect things in other environments

3、 ... and 、BFC It's a css Render a special part , need Certain conditions can Trigger

• The root element or other element that contains it
• Floating elements ( Elemental float No none)
• Absolute positioning elements ( The element has position by absolute or fixed)
• Inline block ( The element has display: inline-block)
• Table cells ( The element has display: table-cell,HTML Table cell default properties )
• Table title ( The element has display: table-caption, HTML Table title default properties )
• have overflow And it's not worth it visible The block element of

Four 、BFC Problems that can be solved

• Vertical outer margin overlap problem
• Remove the float
• Self applicable two column layout

1、 Solve the problem of collapse of outer margin

1）、 The collapse of outer margins of parent-child elements

We have subelements within an element , Set up a margin-top:20px; The resulting parent element has a concrete top 20px Distance of , Obviously not in line with our expectations

* {
  margin: 0;
  padding: 0;
  }
.box {
  width: 400px;
  height: 400px;
  background-color: skyblue;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 30px;
}


<div class="box">
    <div class="box1"></div>
</div>

The effect of setting our page is like this

box A certain distance from the top

If we want to solve the problem of parent-child element margin collapse , We give box add overflow:hidden; attribute

2、 Solve the collapse of the outer margin between the second sibling elements

Two sibling element settings margin:20px; As we think, the two elements should be separated 40px That's right, isn't it , But actually the two elements are far apart 20px

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 100px; 
}

<div class="box1"></div>
<div class="box2"></div>

At this time, there will be the problem of collapse of the outer margin ：

At this time, how to calculate the outer margin ？

• 1. Both are positive numbers , Take the larger value
• 2. Both are negative numbers , Take the higher absolute value
• 3. One is one minus one. , Take two worth and

Let's revise

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 100px; 
}

.box{
    overflow:hidden;
}


<div class="box1"></div>
<div class="box">
    <div class="box2"></div>
</div>

  So the margin is 200px 了

3、 Self applicable two column layout

.box {
    width: 300px;
    height: 400px;
    background-color: skyblue;
}
.box1 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
} 
.box2 {
    height: 200px;
    background-color: blue;
}
    

<div class="box">
   <div class="box1"></div>
   <div class="box2"></div>
</div>

We can see , The blue part is covered , Nor does it automatically adapt to the rest of the layout

If we want to achieve , How to write it?

to box2 Add one more overflow: hidden; Let's see the effect

Automatically adapt to layout

This actually uses  bfc characteristic bfc Area will not be associated with float-box Area overlap

BFC Of course, there are other uses Such as the use of overflow:hidden Remove floats, etc