什么是BFC？
block format contextBFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 通俗来说，BFC就是一个独立的容器，在这个容器中的元素不会对容器外面的元素产生影响。
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC的特性
- 内部的
box在垂直方向上会一个接一个的放置。 - 由垂直方向上由
margin决定，但是同时属于同一个bfc区域下的两个相邻的box盒子之间的margin会重叠，以大的margin为准。 - 每个元素的左边外边距会和包含块的左边界想接触（
bfc中元素不会超出）但是absolute定位是特例 绝对定位。 bfc区域不会和float元素重叠。- 当计算高度时，浮动子元素也需要进行计算。
bfc就是一个独立隔离的容器，里面的子元素不会影响另外一个bfc的内容。
怎么创建BFC
- 根元素（默认情况下只有根元素，即body一个块级上下文）。
- 浮动元素，float 除 none 以外的值。
- 定位元素，position为absolute，fixed。
- display 为 inline-block，table-cell，table-caption其中之一。
- overflow 为hidden，auto，scroll。
BFC的应用
1.利用BFC清除浮动
当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。
如果使用的是触发BFC的容器，则会包裹着浮动元素
下面是使用了BFC特性的请况：
2.利用BFC避免margin重叠
效果如下：
因为两个容器都处在BFC的容器(body)下，所以第一个容器的下边距与第二个的上边距进行了重合，所以两个盒子之间的距离并没有200px，而是100px。
这是使用BFC之后的代码和效果：
根据BFC的布局规则第二条，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包
起来，然后激活它使其成为一个BFC
3.阻止元素被浮动元素覆盖
给一个元素添加浮动属性，覆盖了另一个元素；如果不要覆盖，触发被覆盖元素的BFC属性
解决办法 触发BFC
