bfc
（推荐教程：css快速入门）
即块格式化上下文（block formatting context） 是页面 CSS 视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响的一个区域。
我的理解：
bfc是一个环境，在这个环境中的元素不会影响到其他环境中的布局，也就是说，处于不同bfc中的元素是不会互相干扰的。
作用：
1、阻止外边距折叠
两个相连的块级元素在垂直上的外边距会发生叠加，有些把这种情况看作是bug，但我觉得可能是出于段落排版的考虑，为了令行间距一致才有的这一特性。我们先来看看例子：
*{margin: 0px;padding: 0px}
p {
color: red;
background: #eee;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 10px;
border: solid 1px red;
}
从上面可以看出，我们给两个p元素都设置margin,但中间的间距却发生了折叠。然后举个bfc的例子：
.ele{
overflow: hidden;
border: solid 1px red;
}
从上面可以看出，我们为每个div元素设置overflow的值为hidden,产生一个块级格式上下文，因为外边距不会相互重叠。
2、bfc可以包含浮动的元素
*{margin: 0px;padding: 0px}
.floatL{
float: left;
width: 100px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
}
.box{
border: 1px solid red;
width: 300px;
margin: 100px;
padding: 20px;
}
.bfc{
overflow: hidden;
*zoom: 1;
}
从运行结果可以看出，如果块级元素里面包含着浮动元素会发生高度塌陷，但是将它变成一个bfc后，bfc在计算高度时会自动将浮动元素计算在内。
3、bfc可以阻止元素被浮动元素覆盖
*{margin: 0px; padding: 0px}
.box1{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: rgba(0, 0, 255, 0.5);
border: 1px solid #000;
float: left;
}
.box2{
width: 200px;
height: 200px;
line-height: 100px;
text-align: center;
background-color: rgba(255, 0, 0, 0.5);
border: 1px solid #000;
/* overflow: hidden; */
/* *zoom: 1; */
}
从上面看出，当元素浮动后，会与后面的块级元素产生相互覆盖。那怎么解决这个问题，只要为后面的元素创建一个bfc。添加overflow属性到box2上。
overflow: hidden; *zoom: 1;
这样子阻止了浮动元素重叠的问题。
