什么是BFC?
w3c规范中的BFC定义
浮动元素和绝对定位元素，非块级盒子的块级容器（如：inline-block，table-cells,和table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个的排列，两个盒子之间的垂直的间隙是由他们的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会碰触到容器的左边缘（border-left）（对于从右到左的格式来说，则出喷到右边缘）。
BFC的通俗理解
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见的），箱子里面物品的摆放式不受外界影响。转换为BFC的理解是：BFC中的元素是不受外界影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与航和（行盒由一行中所有的内联元素组成）都会垂直的沿着其父元素的边框排列。
BFC的运用
在很多网站，我们经常会看到这样的一种，左边图片右边文字的两栏结构。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 .box{
width:210px;
border:1px solid #000;
float:left;
}
.img{
width:100px;
height:100px;
background:#545;
float:left;
}
.info{
background:#ccc;
color:#fff;
}
<div class="box">
<div class="img">image</div>
<p class="info">我是一个BFC</p>
</div>
当文字信息只有这点时候，还是人们想看到的结果。但随着文字信息增多，会变的很糟糕。
很明显在文字增多的时候，info类中的文字受到了浮动元素的影响，此时为p元素建立一个BFC，让其内容消除对外界浮动元素的影响。所以只需给info元素添加overflow：hidden；即可为其内容创建新的BFC，当然也可以用其他方法来建立。
解决margin叠加问题
给受影响的元素，添加一个父元素设置样式overflow:hidden;或者给浮动。
用于清除浮动，计算BFC高度
//html
<div class="BFC">
<div class="box"></div>
<div class="box"></div>
</div>
//css
.BFC{
border:6px solid #f00;
width:300px;
}
.box{
border:6px solid blue;
width:100px;
height:100px;
float:left;
}
这个时候我们常见的父元素高度塌陷问题就会出现，首先由于里面的两个子元素浮动的关系，两个box已经脱离了父元素的包含块，父元素高度塌陷，我们需要让父元素包含两个子元素，这样计算高度时，两个子元素就会参与，所以我们要闭合浮动，触发父元素的BFC，我们还是需要使用overflow：hidden；
当然这是使用创建BFC的方式解决浮动问题。