BFC的布局规则？

BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC 的布局规则
一、内部的Box会在垂直方向，一个接一个地放置。如下图图1、图2所示：
我设置了3个除了颜色其它都相同的div，进入浏览器显示如下

图1

图2

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）如下图图3、图4、图5所示：
我给box1设置了下外边距为20px的值，给box2设置上外边距为40px 的值，从图片中可以看出两个盒子的外边距按照40px的值进行设置。

图3

图4

图5
三、每个元素的margin box的左边， 与包含块border box的左边相接触。如下图图6、图7所示：
图7蓝色左边的粉色部分是这个盒子的左外边距，它紧挨着浏览器的左边，整个浏览器就是这个盒子的包含块。通常情况下说margin这个值是相对于同辈元素去使用的，那么在只有一个子元素的情况下它还能显示出来就是因为BFC显示规则里，子元素左边的margin值会相对包含块左边的边宽去显示。

图6

图7
四、BFC的区域不会与float box重叠。如下图图8所示：
通常情况下父元素里边的左边子元素进行浮动，右边子元素由于受到影响会自动向左靠拢，左边一部分就会被遮住，我们就会给右边的子元素也设置一个右浮动，这时候右边的子元素就变成了一个独立的BFC区域，就不会与左边的浮动元素区域重叠了，float属性不为none是可以触发BfC的一个条件。

图8

五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。如下图图9所示：
下图容器里有元素1和元素2，也就是说元素1和元素2是两个独立的个体，它们是处在两个独立的BFC区域里了，元素1里头的子元素不管是浮动也好还是改变其它什么属性都不会影响到旁边的元素2。

图9
六、计算BFC的高度时，浮动元素也参与计算如下图图10、图11、图12所示：
通常在写高度自适应的时候，父元素没有设置高度，里边的子元素添加浮动元素，父元素就会高度塌陷，正常情况下浮动元素的高度是不会被计算在内的，为了能把浮动元素的高度计算在内，这种情况下可以给父元素添加“overflow: hidden;”，overflow: hidden;是可以触发BfC的一个条件，添加了overflow: hidden;这个父元素就变成了一个独立的BFC区域了，这个时候浮动元素的高度就能被计算在内了。

图10

图11

图12
文千千