【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之四：常规流中的Block formatting context

WebAdvocate 2010-08-02 06:34:38

加精

在上次分享的【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之三：定位体系概述中，大致介绍了可视化模型中的定位体系。其中，常规流是最为基础的。

这次就和大家分享常规流的一些布局要点和重要的概念。

在常规流中的框（boxes，元素形成的矩形区域），都属于一个格式化的上下文中，可能是块的，也可能是行内的，但不可能同时是行内的又是块的。块框参与块格式化上下文。行内框参与行内格式化上下文。

块格式化上下文(Block formatting contexts)
有的资料上将 context 翻译成 “内容”。在这里，之所以把context翻译成“上下文”，是因为，它强调框存在的环境。所谓上下文，有活动范围，有效区域的意思。

如何触发
浮动元素，绝对定位元素，inline-blocks，table-cells，table-captions，以及 'overflow'不是 'visible'的元素，会创建新的block formatting context。

在CSS3中，对这个概念做了改动：http://www.w3.org/TR/css3-box/#block-level0
CSS3中，将Block formatting context 叫做 flow root。对于触发方式也做了修改：
The value of ‘position’ is neither ‘static’ nor ‘relative’ (见[CSS3]).

从上下文（context）变成了根（root），这个概念确实挺费解的。

可见，CSS3中的描述更加准确，position在 ‘fixed’ 的时候也会创建 flow root。这并不是CSS2.1的疏忽，因为 position:fixed 本身就是 position:absolute 的一个子类。

注意，display:table 本身并不产生 block formatting contexts。但是，它可以产生匿名框，其中包含 display:table-cell 的框会产生 block formatting context。总之，对于 display:table 的元素，产生 block formatting contexts 的是匿名框而不是 display:table。

它做了什么

这也是一个比较抽象的概念。可以把它想象成一个大箱子，里面装着很多元素，箱子可以隔开里面的元素和外面的元素。好像JS中的闭包，保护其中的元素。它可以包含浮动元素，可以阻止margin折叠，可以防止元素被浮动元素覆盖……

块格式化内容是个重要的概念，它对宽高的计算，margin折叠，定位等都有一定的影响。后续会有详细的说明。

在块格式化上下文中，框会一个接一个地被垂直放置，它们的起点是一个包含块的顶部。两个兄弟框之间的垂直距离取决于'margin'属性。在block formatting context中相邻的块级元素的垂直边距会折叠(collapse)。

在块格式化上下文中，每一个元素左外边(见：【分享】说说标准——你真的了解盒子模型(box model)吗？
)与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的block formatting context。

现实意义

Block formatting context 表现的很像普通的块框，那么它比较特殊的地方在哪里呢？
1. 可以包含浮动元素
2. 不被浮动元素覆盖
3. 阻止父子元素的 margin 折叠

另外，Block formatting context 的特性在某些地方像 IE 中的 hasLayout，对于两者的比较，稍后会奉上。

参考文章：
W3C：http://www.w3.org/TR/css3-box/#block-level0
Yahoo：CSS 101: Block Formatting Contexts

可视化格式模型概述：
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196

更多说说标准系列：
【分享】说说标准系列目录

...全文