http://www.cnblogs.com/v10258/p/3530290.html
Block Formatting Context(块级格式化上下文)是W3C规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
简单的说，当我们在进行盒模型布局的时候，如果一个元素符合了成为BFC的条件，那么该元素就成为一个隔离的容器，元素的内部元素会垂直的沿着父元素的边框排列，和外部元素互不影响。比如浮动元素会触发BFC，浮动元素的子元素主要受该浮动元素的影响，二两个浮动元素之间是互不影响的。
在CSS3中，BFC叫做Flow Root。在早期的IE中也有类似的概念--hasLayOut，IE6、7的很多布局产生的bug都可以通过触发hasLayout修复，比较推荐使用zoom:1和height：1%，因为不会破会已有的样式。
同样以往集中在float、绝对定位、margin collapse中的很多困惑，也会在理解了BFC后消除。
规范中的定义
W3C对BFC的解释：
浮动元素和绝对定位元素，不是块级盒子的酷爱容器（inline-blocks，table-cells和table-captions），以及设置了overflow属性（除了visible）的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直的一个接一个排列，两个盒子之间的垂直的间隙是由它们的margin值所决定的。在同一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）（对于从右到左的格式来说，则是触碰到右边缘）。
如何触发BFC
1、float属性是除‘none’以外的其他值(left, right)
2、overflow属性值是‘visible’以外的值(hidden, auto, scroll)
3、position属性为absolute或者fixed
4、display为以下值之一inline-block，table-cell，table-caption
BFC特性
1. 边缘不和浮动元素重叠
2. 不存在margin collapse的问题
第一个特性非常有用，因为元素触发了BFC的话，就不会被float元素覆盖，当子元素全部浮动的时候也能够正确的包裹住。
第二个margin不会叠加的特性，可以理解为两个处于普通流中的盒子，会有margin叠加的问题，是因为他们属于相同的BFC，当它自身创建一个新的BFC时，这个问题就不存在了。
BFC的常见应用
1、通过边缘不和浮动元素重叠的特性，实现两栏布局
如果一个浮动元素后面跟着一个非浮动元素，那么就会产生一个覆盖的现象，通过触发BFC来清除覆盖，很多自适应的两栏布局就是这么做的。
2、清除元素内部浮动
只要把父元素设为BFC就可以清除子元素的浮动了，同样因为IE6、7不支持BFC，因此需要设置zoom：1来触发hasLayout。
3、解决外边距叠加的问题
在CSS当中，相邻的两个盒子（可能是兄弟，也可能是父子）的外边距可以叠加成一个单独的外边距。这种叠加外边距的方式叫折叠，因此所结合成的外边距叫做折叠外边距。
按照BFC的定义，只有同属于一个BFC时，两个元素才可能产生外边距折叠，这个包括相邻元素、嵌套元素，只要没有padding或者border将它们分割开。
因此解决外边距折叠的问题，只要让它们不处于同一个BFC就可以了。