考虑Normal Flow,Position以及Block Formatting Context的关系起因于Kejun在Twitter上所提及的一个在Internet Explorer和Opera下对元素使用绝对定位进行布局时的一个问题,链接在这里:http://hikejun.com/bugs/opera_ie6_overflow_bug.html
检视了一下CSS 2.1文档,Normal Flow,指正常文档流,在W3官方的CSS 2.1文档中并没有直观的表述,而是阐述了它与元素上下文环境的关系:
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.
正常文档流中的盒模型属于格式化过的块元素上下文环境或者是行内元素上下文环境,块元素处于块元素上下文环境中,而行内元素则处于行内元素上下文环境中.
对于块元素关系环境,W3在CSS 2.1文档中的解释比较模糊:
Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.
浮动元素,使用绝对定位的元素(position属性值为absolute或fixed),另外display属性值为inline-block,table,table-cell,table-caption以及overflow属性值为auto,scroll,hidden的元素可以产生一个新的块元素上下文环境.
而在Mozilla Dveloper Center中有更详细的解释:
A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.
A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
Block formatting contexts are important for the positioning and clearing of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.
所谓的块元素上下文环境是网页样式渲染机制的一部分,它限定了块元素布局区域以及浮动元素相互影响的范围.