BFC(Block formatting context):块级格式化上下文
特点
- 一个独立的渲染区域
- 内部子元素不会影响外部
- 外部不影响内部
两种渲染区域（Formatting Context）
- 块级元素渲染区域 所有display属性为block，list-item，table的元素 以BFC（Block Formatting Context）的方式渲染
- 行内元素渲染区域 所有display属性为inline，inline-block，inline-table的元素 以IFC（Inline Formatting Block）的方式渲染
BFC布局规则
- 默认内部的块元素会垂直方向，堆叠
- 每个块元素独立一行
- 块元素垂直方向的总距离由边框内大小 + margin 共同决定
- 属于同一个BFC的两个相邻块元素的垂直方向上的margin会合并。水平方向的margin不会
- 计算父元素BFC的高度，必须把内部浮动元素的高度计算在内（BFC是一个独立的渲染区域，可以通过这个属性处理清处浮动的操作）
实现BFC渲染区域（4种）
- float的值不是none
- position的值不是static或者relative
- display的值是block、inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
前两个是让容器元素也脱离文档流
