CSS定位机制之普通流详解

由于没有找到自己认为完整的关于普通流、浮动和绝对定位的中文文章，于是鼓起勇气决定自己来写篇。为此大致啃掉了CSS2.1里的8Boxmodel以及9Visualformattingmodel.实话说，还真是看得有点头大，呵呵~文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是documentflow,但标准里只有另一个词，叫做普通流（normalflow），或者称为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSSMastery》，英文原书中至始至终都只有普通流normalflow这一词，从来没出现过文档流documentflow.但是中文译本“普通流”和“文档流”却是交替出现的。

什么是普通流？简单说就是元素按照其在HTML中的位置顺序决定排布的过程。并且这种过程遵循标准的描述。

为了从不同角度说明，我采集了一些可能冗长、具体或者晦涩的其他人给出的定义：

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

Jennifer.Kyrnin@About.com:普通流是元素在多数情况下呈现在web页面上的方式。所有HTML都在块框（blockboxes,块级元素）或者行内框（inlineboxes,行内元素）中。

RainboDesign:当浏览器开始渲染HTML文档，它从窗口的顶端开始，经过整个文档内容的过程中，分配元素需要的空间。除非文档的尺寸被CSS特别的限定，否则浏览器垂直扩展文档来容纳全部的内容。每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到了边界，然后换到下一行垂直渲染。这个过程被成为普通文档流。

可见，把流（flow）理解为流程，完全说的通。普通流即是通常情况下的元素排布和定位流程。

但其实在CSS2.1RC里，普通流的本质是三种定位机制（Positioningschemes）之一，被定义为：

引用：

Normalflow.InCSS2.1,normalflowincludesblockformattingofblockboxes,inlineformattingofinlineboxes,relativepositioningofblockorinlineboxes,andpositioningofrun-inboxes.

这个过程包括了块格式化（blockformatting），行内格式化（inlineformatting），相对定位（relativepositioning），以及run-inboxes的定位。似乎和上面那些迥然不同，但是把这些分解开来，仍然是一致的。

另外，9.4Normalflow下还有一段：

引用：

Boxesinthenormalflowbelongtoaformattingcontext,whichmaybeblockorinline,butnotbothsimultaneously.Blockboxesparticipateinablockformattingcontext.Inlineboxesparticipateinaninlineformattingcontext.

这是段描述，不是定义。在普通流中的Box（框）属于一种formattingcontext（格式化上下文），类型可以是block,或者是inline,但不能同时属于这两者。并且，Blockboxes（块框）在blockformattingcontext（块格式化上下文）里格式化，Inlineboxes（块内框）则在inlineformattingcontext（行内格式化上下文）里格式化。

我们知道，任何被渲染的元素都属于一个box,并且不是block,就是inline.即使是未被任何元素包裹的文本，根据不同的情况，也会属于匿名的blockboxes或者inlineboxes.所以上面的描述，即是把所有的元素划分到对应的formattingcontext里。

组合上面的定义，并且姑且先把formattingcontext看做是一种范围限定，那么具体讲，普通流就是这样的过程：

1.在对应的blockformattingcontext中，块级元素按照其在HTML中的顺序，在其容器框里从左上角开始，从上到下垂直地依次分配空间、堆砌（stack），并独占一行，边界紧贴父容器。两相邻元素间的距离由margin属性决定，在同一个blockformattingcontext中的垂直边界将被重叠（collapse）。并且，除非创建一个新的blockformattingcontext,否则块级元素的宽度不受浮动元素的影响（这就是浮动元素能盖在块级元素上面的原因）。

2.在对应的inlineformattingcontext中，行内元素从容器的顶端开始，一个接一个地水平排布。水平填充、边框和边距对行内元素有效。但垂直的填充、边框和空白边不影响其高度。一个水平行中的所有inlinebox组成了名为linebox的矩形区域。linebox的高度始终容下所有的inlinebox,并只与行高有关。linebox的宽度受到父容器和浮动元素存在的影响（这就是文本环绕浮动元素）。如果linebox的宽度小于容器，linebox的水平排布就取决于text-align.如果linebox的宽度大于容器，则截断linebox并换行在新的linebox中重新排布元素（截断处不应用padding和margin值）。如果linebox无法截断，如单词过长或者指定不换行，则会溢出容器。