CSS中关于BFC的布局规则

首先 我们要先知道，什么是BFC
其实他就是Block formatting context 的首字母缩写，直译为“块级格式化上下文”。
它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

简言之，他就是一些规则集合的名称。
我们页面中的根元素 html 就是一个典型的遵循BFC的元素，还可以通过一些属性触发BFC显示规则。
例如
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

那么这个BFC中都有什么样的显示规则呢？

一、内部的Box会在垂直方向，一个接一个地放置

例如
div p h1~h6标题 这个标签都是块级元素，他们默认的排列方式都是独占一行，自上而下的一个接一个放置。
上栗子~~

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）

这个就是盒模型中左右相邻且没有边框的两个盒子的左右padding值和左右margin值，以及上下排列且没有边框的盒子的上下padding值都是可以累加显示空白区域的，而上下排列的盒子的上下margin值却不是累加显示，而是只显示二者中较大的值的原因了~

举个栗子：
三个div都是200*200的块元素，其中 div1 和div2 浮动使其左右排列，div3清除两侧浮动，使其能够在div1 下方显示，同时都给他们margin：50px

由上图可见：左右排列的两个div的margin是累加的，两个盒子间的空白有100px 而上下排列的两个盒子的空白区域却只有50px。

三、每个元素的margin box的左边， 与包含块border box的左边相接触

上栗子！
如图我们用一个粉色带有5px黑色实线边框的div包住一个红色带有margin：50px的div1，可见，内部的div1的左侧margin是从他的父元素内部的左侧开始的

四、BFC的区域不会与float box重叠。

这就是一个重叠了的栗子：

如上图：200*200 的div1 左浮动则不会在占据他原有位置，此时下方的div3会上来占据div1 的位置，看上去就是div1 重叠覆盖在 div3上，而此时如果给div3添加一个能触发BFC的属性，那么div3的区域则不会与float box重叠

此时给div3 添加了一个 overflow：hidden 触发BFC，所以div3的区域没有再和div1 重叠了。

五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

接着上面的栗子来说：
div1 添加了float:left; div3添加了overflow：hidden； 所以div1和div3都是触发了BFC的容器，遵循BFC规则，那么这两个容器都是互相独立的，容器里面的子元素不会影响到外面的元素。
看图亦可得，div1中的p标签始终在div1中显示，没有干扰到div3和它里面的子元素。

六、计算BFC的高度时，浮动元素也参与计算

划重点
这一点可以解决浮动带来的父元素高度塌陷问题哦~

如图有10px黑色实线边框的父元素box 设置height：auto 且里面的子元素div1和div2都设置浮动后，则高度由内容撑起的父元素box会高度塌陷

如下图所示：，给父元素box添加了overflow：hidden 触发了BFC，那么遵循BFC规则，box中的浮动元素的高度也会被计算进来，那么height：auto的高度，此时应为div2的高度

到这里，BFC的几点显示规则就都描述完啦~~~ 拜吖