BFC的理解与应用

首先我们来看看w3c规范对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的通俗理解：

首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的运用

在w3c的规范中，除了上面的一段定义之外，BFC的相关知识点分布地比较零散，但基本集中在float、绝对定位、margin collaspe中。下面我们来看看如何应用到BFC来解决问题。

在很多网站中，我们经常会看到这样的一种，左边图片+右边信息的两栏结构，下面我们来看看如何利用BFC来实现。

首先我们给出这样的结构：

//CSS
.box {width:210px;border: 1px solid #000;float: left;}
.img {width: 100px;height: 100px;background: #696;float: left;}
.info {background: #ccc;color: #fff;}
//HTML
<div class="box">
    <div class="img">image</div>
    <p class="info">信息信息信息信息信息信息信息信息信息信息信息信</p>
</div>

一般情况下它呈现出我们所乐意看到的样子：

但