BFC(Block Dormatting Context)
参考资料：
- W3：BFC
- 博客：http://rlog.cn/?p=608
- 博客：http://www.smallni.com/haslayout-block-formatting-contexts/
- w3help:http://w3help.org/zh-cn/
一、Block Formatting Context是什么
当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。 为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免 不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成 Block Formatting Context。二，怎样才能触发Block Formatting Context
当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context- float的值不为none。
- overflow的值不为visible。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。
三，Block Formatting Context有什么作用
- Block Formatting Context可以阻止边距折叠（margin collapsing）。我 们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
- Block Formatting Context可以包含内部元素的浮动。考虑一下下面的例子（请 用标准浏览器查看）： [php] <html> <head> <style> body,html { margin: 0; padding: 0; } #red, #orange, #yellow, #green { width: 100px; height: 100px; float: left; } #red { background: red; } #orange { background: orange; } #yellow { background: yellow; } #green { background: green; } </style> </head> <body> <div id="c1"></div> <div id="c2"></div> </body> </html> [/php] 在上面的代码本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通 过上面的分析，让#c1形成新的Block Formatting Context就可以解决问题。
- Block Formatting Context可以阻止元素被浮动覆盖。请看示例： [php] <html> <head> <style type="text/css"> html, body { margin: 0; padding: 0; } #left { width: 100px; height: 100px; background: red; float: left; } #right { height: 200px; background: yellow; } </style> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html> [/php] 在标准浏览器下可以看到，普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况，有一种方法就是让#right形成新的Block Formatting Context。但是这里一定要注意的是，浮动不会覆盖的只是Block Formatting Context的border-box。换句话说，形成Block Formatting Context元素的margin还是会被浮动所覆盖掉的。
