浅谈BFC的理解
在 web 页面布局中，有三种控制元素版式布局的模型：
- 普通流 (Flow)
元素在 HTML 中按照先后位置从上至下的流式排列方式布局。
- 浮动流（Float）
在浮动布局中，元素首先按照普通流的位置呈现，然后根据浮动的方向向左边或右边偏移。
- 定位流（Position）
在绝对定位布局中，元素会整体脱离普通流，而元素的具体位置由绝对定位的坐标决定。
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。
只要元素满足以下任一条件即可触发 BFC ：
1. float 元素：除 none 的值，float: left | right;
2. 绝对定位元素：position: absolute | fixed;
3. display: inline-block | table-cells | table-caption | inline-flex | flex;
4. overflow 除了 visible 的值，overflow: hidden | scroll | auto;
BFC 的特性：
1. 同一个 BFC 下外边距折叠
例如：上下两个盒子 div，一个设置了 margin-bottom，一个设置了 margin-top，两个 div 的边距就会重叠而取其中最大的边距为两个 div 之间的距离。如果要避免这种外边距折叠，可以新建一个 BFC 容器，将两个 div 放在不同的 BFC 容器中。
<div> DIV1 </div>
<div> DIV2 </div>
<!-- 可以更改成如下 -->
<div>
<p> DIV1 </p>
</div>
<div> DIV2 </div>
2. 可以清除浮动
<div>
<div style="width: 100px;height: 100px;float: left;"></div>
</div>
<!-- 触发容器的BFC后 -->
<div style="overflow: hidden">
<div style="width: 100px;height: 100px;float: left;"></div>
</div>
3. BFC 可以阻止元素被浮动元素覆盖
<div style="width: 100px;height: 100px;float: left;">我是一个左浮动的元素</div>
<div style="height: 200px;">我是一个没有设置浮动, 也没有触发 BFC 元素</div>
<!-- 触发 BFC 后 -->
<div style="width: 100px;height: 100px;float: left;">我是一个左浮动的元素</div>
<div style="height: 200px; overflow: hidden;">我是一个没有设置浮动, 也没有触发 BFC 元素</div>
这个方法可以用来实现两列自适应布局，左边的宽度固定，右边自适应宽度。
