BFC是什么？有什么作用

Block formatting context：块级格式化上下文
1.前言
官方文档解释为：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。
怎么理解呢，我们通过以下代码来看：
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
<div class="box6"></div>
</div>
</div>
假设box1和box4是两个BFC区域，那么根据上述原理能理解到的就是，box1这个BFC区域包含了子元素box2，box3，box4但不包括box56。而box4这块BFC区域则包含了box56这三个子元素。
综上，BFC有以下特点：
（1）每一个BFC区域只包括其子元素，不包括其子元素的子元素。
（2）每一个BFC区域都是独立隔绝的,互不影响

2.如何将一个区域设置为BFC区域呢
（1）float 的值不是 none

（2）position 的值不是static或者relative。

（3）display的值是inline-block、table-cell、flex、table-caption或者inline-flex

（4）overflow 的值不是 visible

（5）弹性布局flex

3.那么这个BFC到底有啥用处呢

由于它的独立性，也就是内部不干扰到外部，因此可以解决很多具体的问题，例如，如下：

（1）可以解决margin垂直塌陷问题。

比如纵向设置一个margin-bottom,和一个margin-top，但是实际两个元素之间的间距并不是这两个数值相加，而是重合的取最大值呈现的，要想达到相加的效果，就可以

给各自添加一个BFC的父元素。

（2）可以解决包含的塌陷问题。

有时候子元素的margin，会带着父亲一起跑，因此，可以设置父亲为BFC，这样里面元素的样式就不会影响到父亲的偏移，也就影响不到父亲外层的样式。

（3）清除浮动

大家都知道，浮动会导致父元素高度塌陷，那大家还记得怎么清除浮动吗？相信很多人都知道：overflow：hidden嘛。相信在认识BFC之前大家肯定不太清楚为什么overflow：hidden可以清除浮动。现在知道了，BFC区域内的子元素任何边动都是不会影响到外部元素的。所以BFC区域同样可以清除浮动带来的影响。

（4）BFC可以阻止标准元素流被浮动元素覆盖的问题。

例如，一个元素设置为absolute定位之后，它可能会漂浮以至于能够遮住其他元素，我们想设置浮动元素在某一块区域内运动，也就是说在一个盒子里面，一般的思路是找个父元素然后设置position定位，

此时学习了BFC之后，我们可以设置另外一个元素也就是不想被遮住的那一块为一个封闭的BFC，即overflow: hidden就可以使其不受外部的元素影响。完美解决问题了；

4.最后总结一下

一个BFC区域只包含其子元素，不包括其子元素的子元素。
并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。
不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。