BFC：块级格式化上下文，它指的是一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC的生成
（1）float的值不为none；
（2）overflowd的值不为visible；
（3）display的值为inline-block, table-cell, table-caption；
（4）position的值为absolute或fixed；
BFC的约束规则
（1）生成的BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
（2）生成BFC元素的子元素中，每一个子元素的外边距和包含块的左边界相接处，（对于从右到左的格式化，右外边距和右边距相接触），除非这个子元素也创建了一个新的BFC（比如它自身也是一个浮动元素）。
有朋友对它做了分解，我们直接拿来：
（1）内部的BOX会在垂直方向上一个接一个的放置；
（2）垂直方向上的距离有margin决定。（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关）
（3）每个元素的左外边距与包含块的左边距相接触（从左到右），即使浮动元素也是如此。（这说明BFCD子元素不会超出它的包含块，而position为absolute的元素可以超出它 包含块边界）；
（4）BFC的区域不会与float的元素区域重叠；
（5）计算BFC的高度时，浮动子元素也参与计算；
（6）BFC就是页面上的一个隔离的容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC两栏自适应布局
html代码：
<p class="left"></p> <p class="right"></p>
css代码
.left{
width:200px;
height:200px;
background:red;
float:left;
}
.right{
height:200px;
background:green;
overflow:hidden;
}
运行以上代码，伸缩页面宽度，可以发现的确是自适应
或者：
.right{
height:200px;
background:green;
display:table-cell;
width:9000px;//宽度大于显示屏
}
BFC三栏布局
<p class="left"></p> <p class="right"></p> <p class="middle"></p>
css代码如下：
.left{
width:200px;
height:200px;
float:left;
background:red;
}
.right{
width:200px;
height:200px;
float:right;
background:green;
}
.middle{
display:table-cell;
width:9000px;
*display:inline-block;
*width:auto;
height:200px;
background:pink;
}
在这里*表示兼容IE6和IE7
