BFC 是什么
BFC(Block formatting contexts)，
块格式化上下文，它是文档中的一块渲染区域，有自己的一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用！
下列方式会创建(触发)块格式化上下文：
- 根元素（
<html>） - 浮动元素（元素的
float不是none） - 绝对定位元素（元素的
position为absolute或fixed） - 行内块元素（元素的
display为inline-block） - 表格单元格（元素的
display为table-cell，HTML表格单元格默认为该值） - 表格标题（元素的
display为table-caption，HTML表格标题默认为该值） - 匿名表格单元格元素（元素的
display为table、``table-row、table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或inline-table） overflow计算值(Computed)不为visible的块元素display值为flow-root的元素contain值为layout、content或 paint 的元素- 弹性元素（
display为flex或inline-flex元素的直接子元素） - 网格元素（
display为grid或inline-grid元素的直接子元素） - 多列容器（元素的
column-count或column-width(en-US) 不为auto，包括 ``column-count为1） column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
BFC 的特性
1、同一个 BFC 下上下外边距会合并
2、清除浮动（BFC 可以包含浮动的元素）
3、BFC 的区域不会与 float 的元素重叠
