BFC

什么是BFC

BFC（block formatting contex）：块级格式化上下文，决定元素如何对其内容进行定位以及与其他兄弟元素的关系和相互作用。
BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局，也可以将其理解为隔离的独立容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

形成BFC的条件

1. float 除 none 以外的值；
2. position：absolute / fixed；
3. display:inline-blocks / table-cells / table-captions；
4. overflow：hidden / auto / scroll

常见作用

1. 高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用bfc来清除浮动了。

2. div浮动兄弟遮盖问题：左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden，触发bfc来解决遮挡问题。

3. margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。