CSS之BFC

BFC（Block Formatting Context，块格式上下文）

具有BFC特性的元素能够看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。

在CSS3中。BFC叫做Flow Root。

在CSS2.1中。有三种定位方案——普通流（Normal Flow），浮动（Float）和绝对定位（Absolute Positioning）。

（1）怎样触发BFC？

下列情况将创建一个BFC环境：

（a）浮动（元素的float非none）

（b）绝对定位元素（元素的position为absolute或fixed）

（c）display为inline-block, table-cell, table-caption, flex, inline-flex

（d）overflow非visible（为hidden，auto，scroll）

（2）BFC有什么特性？

（a）BFC会阻止竖直margin的折叠

假设两个块级元素相邻且在同一个BFC环境时，它们竖直方向之间的margin（margin-bottom与margin-top）会发生折叠（塌陷）。

而假设它们不在同一个BFC下。则不会折叠。

（b）BFC能够”包容“浮动元素

BFC会依据子元素的情况自己主动调整高度。即使其子元素中包括浮动元素

（c）BFC能够阻止元素被浮动元素覆盖