BFC就是块级格式上下文，是一个独立渲染的区域。
规则特性
- 内部的 Box(CSS布局的对象和基本单位)会在垂直方向，一个接一个地放置
- Box垂直方向的距离由margin决定,相邻盒子的外边距会发生重叠
- 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
- BFC 的区域不会与 float box 重叠
- 计算BFC高度时，浮动元素也参与计算
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
BFC的生成方式有
- html 根元素
- float（浮动） 属性不为 none
- position（定位） 为 absolute（绝对定位） 或 fixed（固定定位）
- display（布局方式） 为表格布局或者弹性布局（ inline-block（行内块）， table-cell(表格单元格显示)， table-caption(表格标题显示)， flex(弹性容器)， inline-flex(伸缩容器))
- overflow 不为 visible
BFC 主要的作用
- 清除浮动
- 防止同一 BFC 容器中的相邻元素间的外边距重叠问题
