BFC(block formatting context):块级格式化上下文（实际就是一个隔离罩）
W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
渲染规则：
规则很重要，要记住。
规则1：在BFC中元素垂直方向上的margin会重叠。
规则2：BFC内相当于一个独立的世界，里面的元素无论怎么变化都不会影响外面。
规则3：BFC内元素不会与浮动元素发生重叠（这是BFC解决浮动的根本原因）。
规则4：计算高度时，浮动元素也会参与（也就是overflow:hidden能清浮动的原因）。
创建BFC:
- body 根元素(html)
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)