通俗理解：首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
创建了BFC的元素会按照如下的方式对其子元素进行排列：
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。即是在BFC中相邻的块级元素的垂直边距会折叠（collapse）。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此（尽管一个子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC，如它自身也是一个浮动。
名词解释：
边距折叠：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠的结果：
1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3.两个外边距一正一负时，折叠结果是两者的相加的和。
产生折叠的必备条件：margin必须是邻接的,且需要满足如下条件：
1.必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
2.没有线盒，没有空隙（clearance），没有padding和border将他们分隔开
3.都属于垂直方向上相邻的外边距，可以是下面任意一种情况
元素的margin-top与其第一个常规文档流的子元素的margin-top元素的
margin-bottom与其下一个常规文档流的兄弟元素的margin-top
height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
那么，什么情况下会创建BFC：
1.浮动元素（float:left|right）
2.绝对定位元素（position:absolute|fixed）
3.行内块元素（display:inline-block）
4.表格的单元格（display:table-cells，TD、TH）
5.表格的标题（display:table-captions，CAPTION）
6.'overflow'特性不为visible的元素
7.表格元素创建的"匿名框"
值得注意的是，"display:table" 本身并不产生 "block formatting contexts"。但是，它可以产生匿名框， 其中包含 "display:table-cell" 的框会产生块格式化上下文。
总之，对于 "display:table" 的元素，产生块格式化上下文的是匿名框而不是 "display:table"。
最后，是这些元素创建了块格式化上下文，它们本身不是块格式化上下文。
BFC的运用：消除浮动与多栏布局。
1.自适应两栏布局
<style> body { position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; } </style> <body> <div></div> <div></div> </body>
效果如下：
根据BFC的规则：
每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
所以，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。
因此，我们可以根据：
BFC的区域不会与float box重叠。
来通过触发main生成BFC，实现自适应两栏布局。
.main { overflow: hidden; }
当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：
2.清除内部浮动