BFC规范

 

BFC——Block Formatting Contexts （块 格式化 上下文）

 

格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。

 

创建了BFC的元素会按照如下的方式对其子元素进行排列：

 

1：元素的子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于'margin' 特性。在BFC中相邻的块级元素的垂直边距会折叠（collapse）。

 

2：元素的子元素中，每一个子元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC，如它自身也是一个浮动。

如何形成BFC

满足下面任意条件的元素可形成BFC：

1.       浮动元素，float除了none外的值

2.       绝对定位元素，position：absolute/fixed

3.       display为inline-block、table-cells、table-captions(表格标题)之一

4.       overflow为visible之外的值（hideen、auto、scroll（块级区域始终有滚动条））