Block Formatting Contexts (块级格式化上下文) 详解

最近在学习BootStrap框架，发现里面清除浮动的类 .clearfix 跟平时自己用的不太一样。它的样式是这样的：

.clearfix:before

{

   content: " ";

   display: table;

}

.clearfix:after

{

   content: " ";

   display: table;

   clear: both;

}

    用:befor和:after伪元素清除浮动是我熟悉的,不过一般我使用display:block而非display:talbe. 在查找有关资料时候发现了Block Formatting Contexts(块级格式化上下文)的概念，以前没有接触过，学习过后对CSS布局又有了更深层的认识，觉得有必要记录下这一关键的知识点。

一、什么是Block Formatting Contexts？

BFC可以看做是一个容器，在这个容器中的元素与外部元素隔离，也就说容器内的元素不会影响外部的元素。同时BFC还具有普通容器（block box）没有的特性，比如它可以包含浮动的元素，不会出现高度塌陷的问题。BFC是页面流的一部分。

二、怎样触发Block Formatting Contexts？

当给某一元素添加以下样式中的任意一个时，就触发了BFC，也就是说这个元素处在一个独立的BFC容器中，与其他元素隔离。

1. float: left/right/inherit 也就是除none以外的浮动元素

2. position: absolute/fixed 绝对定位元素，fixed是absolute的一个子类，也属于绝对定位

3. display: inline-block/table-cell/table-captions 需要注意的是display: table本身不可以触发BFC，但是由于table会产生匿名盒，而匿名盒的display: table-cell特性会触发BFC，产生新的格式化上下文。

4. overflow: hidden/auto/scroll/inherit

三、Block Formatting Contexts有哪些特性？

1. 阻止外边距折叠

正常情况下，两个相邻的div块都有外边距时，外边距会合并折叠，而一旦一个元素触发了BFC，处在一个独立的格式化上下文中时，它的外边距不会和相邻的块级元素折叠。

举个栗子：

<div style = "background: #F3C; margin: 15px">

<p style="margin: 15px">div1 margin:15px</p></div>

<div style="background: #FF3; margin: 15px"><p style="margin: 15px">div2 margin:15px</p></div>

<div style="overflow: hidden; background: #6F0; margin: 15px"><p style="margin: 15px">div3 margin:15px; overflow: hidden</p></div>

它的效果图是这样的：

图中的div1、div2、div3处于同一个格式化上下文中，所以它们的外边距15px都折叠了，表现为这三个div块的间距都是15px而不是30px。div1和div2没有触发BFC，所以它们与其子元素<p>也处于同一个格式化上下文中，所以<p>元素的外边距与其父元素的外边距连在一起了，于是又进行了折叠。这里需要注意的是如果给外部div加了边框则其与子元素p的外边距折叠无效，因为这两个外边距没有连在一起，中间隔了div的border。

div3添加了overflow: hidden样式，触发了BFC，所以它内部形成了一个新的格式化上下文，这样它的子元素p就处在这个新的格式化上下文中，所以它的外边距没有与外部的div3的外边距折叠。