CSS之BFC_html/css_WEB-ITnose

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可以阻止元素被浮动元素覆盖

版权声明：本文为博主原创文章，未经博主允许不得转载。