1、讲 BFC 之前，先了解有哪些文档流
- 普通流
- 块状元素都会在包含元素内自上而下按顺序堆叠分布。在默认状态下，块状元素的宽度为100%，占据一行显示，不管这个元素是否包含内容，宽度是否为100%
- 行内元素都会在包含元素内从左到右水平分布显示，类似于文本流，超出一行后会自动换行显示，然后继续从左到右按顺序流动，以此类推
- 定位流（绝对定位）
元素会整体脱离普通流
- 浮动流
元素首先按照普通流的位置显示，然后根据浮动的方向尽可能的向左或向右边便宜
2、BFC 是什么
BFC 属于普通流，是一个独立的区域，渲染规则和外部无关
特点：
- 垂直方向上，自上而下排列，和文档流的排列方式一致
- 在BFC中上下相邻的两个容器的 margin 会重叠
- 计算BFC的高度时，需要计算浮动元素的高度
- BFC区域不会与浮动的容器发生重叠
- BFC是独立的容器，容器内部元素不会影响外部元素
- 每个元素的左 margin 值和容器的左 border 相接触
3、BFC产生的方法
- 根元素：body；
- 元素设置浮动：float 除 none 以外的值；
- 元素设置绝对定位：position (absolute、fixed)； 非 relative
- display 值为：inline-block、table-cell、table-caption、flex等；
- overflow 值为：hidden、auto、scroll；非 visible
4、BFC 能解决什么问题
- 解决 margin 重叠问题
- 解决高度塌陷的问题（清除浮动）
- 阻止元素被浮动元素覆盖