BFC：Block Formatting Context.
BFC就是一种布局方式，在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子本身内部创建了新的 BFC)。 developer center上面有对BFC的一段描述：
一个 block formatting context 是web页面可视化CSS渲染的一个部分，是一块 block boxes 排布以及 float 元素相互做用的区域。css
能够理解为一个做用范围，在一个BFC里的布局与其以外的布局不相关或者说不相互影响。有一个形象的例子可做参考：html
把一个页面想象成大的集装箱，这个集装箱里装的货物就是html元素。在现实生活中为了不不一样人的货物相互混淆，都是把 货物打好包装再装入集装箱，这样的话不管你包装里面的货物怎么摆放，都不会影响到其余人的货物。那么这个包装就能够被想象成Block Formatting Context。前端
如何建立BFC
当一个HTML元素知足下面条件的任何一点，均可以产生Block Formatting Context：css3
- float的值不为”none”
- overflow的值不为”visible”
- display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
- position的值不为 “static” 或 “relative”中的任何一个
我是一个使用浮动布局的孩子来的。今天才知道了这种原来也有能够不用清除浮动来布局，只要对BFC这个概念清晰明了，彻底能够不用清除浮动来布局了。web
之前的误解
1.折叠margin
之前老是认为，相邻两个盒子放在一块儿，他们的margin会重叠，取值为最大的一个做为他们之间的margin值ide
下面我在一篇文章里面完全了解了折叠margin产生的缘由了。布局
这些margin都处于普通流中，并在同一个BFC中；
这些margin没有被非空内容、padding、border 或 clear 分隔开；
这些margin在垂直方向上是毗邻的，包括如下几种状况：学习
一、一个box的top margin与第一个子box的top margin
二、一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height为auto的状况下
三、一个box的bottom margin与紧接着的下一个box的top margin
四、一个box的top margin与其自身的bottom margin，但须知足没建立BFC、零min-height、零或者“auto”的height、没有普通流的子box网站
垂直方向上毗邻的box不会发生折叠的状况：ui
根元素的外边距不会参与折叠
一个有clearance的box的上下margin毗邻，它会与紧接着的下一个box发生margin折叠，但折叠后的margin不会再与它们父box的bottom margin折叠
折叠边距的计算
当两个margin都是正值的时候，取二者的最大值；当 margin 都是负值的时候，取的是其中绝对值较大的，而后，从 0 位置，负向位移；当有正有负的时候，先取出负 margin 中绝对值中最大的，而后，和正 margin 值中最大的 margin 相加。但必须注意，全部毗邻的margin要一块儿参与运算，不能分步进行。
如何解决再float的状况下两个盒子折叠在一块儿呢？方法固然是创建一个bfc
< div id="A" style="background:#aaa;overflow:auto;margin-top:20px;">
< div id="B" style="background:white;border:1px solid green;margin-top:10px;">
B：给A加了overflow:auto以后，我有10px的margin-top了
</div>
< /div>
< /div>
2.BFC能够包裹浮动元素实例解析
继续BFC的话题的讨论，本文讨论一个简单的例子：如何制做两行两列的网页布局，解决浮动布局不换行的问题。
制做两行两列的布局方法不少，浮动布局、表格布局和基于display:inline-block的列表布局。这个重点讨论浮动布局，由于咱们这里要解决浮动布局里的一个问题：元素浮动不换行怎么办？其余布局先作简单叙述，做为拓展将在之后的博文里仔细论述。
用浮动布局实现
考虑一下下面的例子,目标是显示成两行两列：
< div id="red" style="background: red;width: 100px;height: 100px;float: left;"></div>
< div id="orange" style="background: orange;width: 100px;height: 100px;float: left;"></div>
< /div>
< div id="B">
< div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;"></div>
< div id="green" style="background: green;width: 100px;height: 100px;float: left;"></div>
< /div>
咱们能够看到四个盒子最终都处在一列里面。
但咱们的本意是让他们处在同一个盒子，并分红两列的。
有什么方法呢？
在其中一个外层盒子创建一个BFC了。
< div id="red" style="background: red;width: 100px;height: 100px;float: left;"></div>
< div id="orange" style="background: orange;width: 100px;height: 100px;float: left;"></div>
< /div>
< div id="B">
< div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;"></div>
< div id="green" style="background: green;width: 100px;height: 100px;float: left;"></div>
< /div>
3.左边的浮动，右边的盒子被左边的遮住了
4.层内浮动溢出的探讨
< div id="content">
< div id="content-inner">
< ul class="content-banner clearfix">
< li class="item" style="float:left">向左浮动元素</li>
< li class="item" style="float:left">向左浮动元素</li>
< li class="item" style="float:left">向左浮动元素</li>
< /ul>
< /div>
< /div>
参考资料：
CSS 101: Block Formatting Contexts（BFC）（原文已挂掉，这里是转载的）
Block-level boxes、containing block、block formatting context 三者之间的区别和联系