理解Block Formatting Context

CSS
yutao

我一直想好好了解下css的Block Formatting Context概念，拖到今天…三个英文单词太长了，简写成BFC吧!
关于BFC很多博文都有介绍，我对它不陌生，可我总觉得还有有必要自己在了解一下，记录一下。
@yuiblog的博文CSS 101: Block Formatting Contexts介绍了BFC的几个作用：

1.BFC prevent margin collapsing(BFC阻止margin的折叠)
2.BFC contain floats(BFC包含浮动元素)
3.BFC do not overlap floats(BFC不会重叠浮动的元素)

以上背景，我google后发现一篇翻译视觉格式化模型#BFC，逐字逐句看了。

我得到BFC这么些信息:

1.BFC类似一种属性，某种框（就理解成div或sapn吧）触发这个属性后其内容会创建新的BFC；
2.能触发BFC这个属性的方法目前有4种；
    a）能产生浮动框属性，float: left | right | inherit。
    b）产生绝对定位框的属性，position: absolute | fixed。
    c）产生非块框的块容器的属性，display: inline-blocks | table-cells | table-captions。
    d）overflow属性的非'visible'块框，overflow: hidden | scroll | auto | inherit。 
3. BFC是属于正常排版（Normal flow）,因此它会一个接一个的垂直摆放。      
4. 在同一个BFC里，相邻块margin的top和bottom会折叠。
5. 在BFC里，每个块会紧贴父块的左侧，浮动也不会改变,除非创建新的BFC。

而用这些原理也很好的解释了BFC的作用。

BFC阻止margin的折叠的demo
BFC包含浮动元素的demo
BFC不会重叠浮动的元素的demo

这篇博文里没有介绍多少新鲜货；
我期望在了解了BFC的原理后能在以后的项目中能友好的理解一些css奇特现象，并且能发掘出更多BFC的作用。
对了IE这货有自己的私有属性叫hasLayout跟BFC的功能类似。
参考资料:
http://www.w3.org/html/ig/zh/wiki/CSS2/visuren
CSS 101: Block Formatting Contexts

相关文章：
haslayout综合
更加直观地了解hasLayout和BFC
详说 Block Formatting Contexts (块级格式化上下文)