BFC是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
提问：为什么overflow：hidden，又可以解决清除浮动，还可以解决外边距塌陷？
本质是触发了容器的BFC规则。
BFC特性：
（1）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
（2）计算BFC的高度时，浮动元素也参与计算。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
怎么触发一个BFC：
（1）浮动元素 (元素的 float 不是 none)
（2）绝对定位元素 (元素具有 position 为 absolute 或 fixed)
（3）内联块 (元素具有 display: inline-block)
（4）表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
（5）表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
（6）具有overflow 且值不是 visible 的块元素，
（7）display: flow-root
（8）column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中
