什么是BFC?

什么是 BFC（Block formatting contexts）?

w3c规范中的BFC定义：

    浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
    在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
    在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
简言之：提供一个独立布局的环境，每个BFC都遵守同一套布局规则。

css布局中一个简单的应用bfc的例子： http://www.aliued.cn/2012/12/31/css%E5%B8%83%E5%B1%80%E4%B8%AD%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%BA%94%E7%94%A8bfc%E7%9A%84%E4%BE%8B%E5%AD%90.html

BFC的相关知识点分布地比较零散，但基本集中在float、绝对定位、margin collaspe中。
当元素CSS属性设置了下列之一时，即可创建一个BFC:
  float：left|right
  position：absolute|fixed
  display: table-cell|table-caption|inline-block
  overflow: hidden|scroll|auto

BFC在浮动中的应用：左边图片+右边信息的两栏结构

<div class="box">
    <div class="img">image</div>
    <p class="info">信息信息信息信息信息信息信息信息信息信息信息信信息信息信息信息信息信息信息信息信息信息信息信信息信息信息信息信息信息</p>
</div>

//给info元素添加overflow:hidden;为其内容建立新的BFC,消除对外界浮动元素的影响。
.box {width:210px;border: 1px solid #000;float: left;}
.img {width: 80px;height: 80px;background: #696;float: left;}
.info {background: #ccc;color: #fff;overflow:hidden;}

BFC在折叠外边距的应用：相邻的两个盒子合并外边距
折叠的结果：
  两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  两个外边距一正一负时，折叠结果是两者的相加的和。
详见： http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html