什么是bfc

BFC（Block Formatting Context），块级格式化内容
可以把BFC理解为形成了一个独立的容器，在容器内的布局不受到外界的影响

通过设置css属性创建BFC，总结常用的4点方式：

1. 设置float的值为left或right
2. 设置position的值为absolute或fixed
3. 设置display的值为inline-block、flex、table-cell、table-caption
4. 设置overflow的值不为visible

应用场景

1. 让浮动元素之间不重叠
如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，浮动的元素会覆盖在非浮动元素的上面

// html
<div class="box1">元素1</div>
<div class="box2">元素2</div>

// css
.box1{
  width: 50px;
  height: 50px;
  background:wheat;
  float: left; // 浮动
}
.box2{
  width: 200px;
  height: 200px;
  background:turquoise;
}

现象：

此时需要给没有浮动的元素创建一个BFC就行了，比如加一个：
display：inline-block，需要设置宽
overflow: hidden，不需要设置宽

.box2加上后效果：

2. 清除元素内部浮动
子级元素浮动时，父元素没设高度会引起内部高度为0的问题

// html
<div class="boxF">
  <div class="boxC">子元素</div>
</div>

// css
.boxF{
  border: 1px solid red;
}
.boxC{
  width: 100px;
  height: 100px;
  background:turquoise;
  float: left;
}
复制代码

现象：

此时只要把父元素设一个BFC就可以清理子元素的浮动了，最常见的方法就是给父元素设置overflow: hidden样式

.boxF加上后效果：

3. 解决上下相邻两个元素外边距折叠
上下相邻元素设置间隔10px+10px，应该为20px，但是发生了折叠，只有10px

// html
<div class="box1">元素1</div>
<div class="box2">元素2</div>

// css
.box1{
  width: 50px;
  height: 50px;
  background:wheat;
  margin-bottom: 10px;
}
.box2{
  width: 50px;
  height: 50px;
  background:turquoise;
  margin-top: 10px;
}
复制代码

现象：

此时只需要将其中的一个盒子使用BFC包裹就行

.box1加上display:inline-block 后效果：

注意：这种情况比较特殊，虽然能用BFC的方式解决，但使用BFC的其他一些方式并没有效果，可见BFC也不是万能的，具体情况具体解决，对于这种情况建议单方面给一个元素设置margin即可

作者：岭南蜀香
链接：juejin.cn/post/710742… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。