CSS定位機制之一:普通流

原創。原文：http://www.swordair.com/blog/2010/08/415，轉載請保留。

由于沒有找到自己認為完整的關于普通流、浮動和絕對定位的中文文章，于是鼓起勇氣決定自己來寫篇。為此大致啃掉了CSS2.1里的 8 Box model 以及 9 Visual formatting model 。實話說，還真是看得有點頭大，呵呵~

文檔流，其實標準里根本就沒有這個詞。如果把文檔流直譯為英文就是 document flow ，但標準里只有另一個詞，叫做普通流( normal flow )，或者稱為常規流。但似乎大家更習慣文檔流的稱呼，因為很多中文翻譯的書就是這么來的。比如《CSS Mastery》，英文原書中至始至終都只有普通流 normal flow 這一詞，從來沒出現過文檔流 document flow 。但是中文譯本“普通流”和“文檔流”卻是交替出現的。

什么是普通流？簡單說就是元素按照其在 HTML 中的位置順序決定排布的過程。并且這種過程遵循標準的描述。

為了從不同角度說明，我采集了一些可能冗長、具體或者晦澀的其他人給出的定義：

• 將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。
• Jennifer.Kyrnin@About.com: 普通流是元素在多數情況下呈現在 web 頁面上的方式。所有 HTML 都在塊框( block boxes，塊級元素 )或者行內框( inline boxes，行內元素 )中。
• Rainbo Design: 當瀏覽器開始渲染 HTML 文檔，它從窗口的頂端開始，經過整個文檔內容的過程中，分配元素需要的空間。除非文檔的尺寸被 CSS 特別的限定，否則瀏覽器垂直擴展文檔來容納全部的內容。每個新的塊級元素渲染為新行。行內元素則按照順序被水平渲染直到當前行遇到了邊界，然后換到下一行垂直渲染。這個過程被成為普通文檔流。

可見，把流( flow )理解為流程，完全說的通。普通流即是通常情況下的元素排布和定位流程。

但其實在CSS2.1RC里，普通流的本質是三種定位機制( Positioning schemes )之一，被定義為：

引用:

Normal flow. In CSS 2.1, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.

這個過程包括了塊格式化( block formatting )，行內格式化(inline formatting )，相對定位( relative positioning )，以及 run-in boxes 的定位。似乎和上面那些迥然不同，但是把這些分解開來，仍然是一致的。

另外，9.4 Normal flow下還有一段：

引用:

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.

這是段描述，不是定義。在普通流中的 Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬于這兩者。并且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內框) 則在 inline formatting context(行內格式化上下文) 里格式化。

我們知道，任何被渲染的元素都屬于一個 box ，并且不是 block ，就是 inline 。即使是未被任何元素包裹的文本，根據不同的情況，也會屬于匿名的 block boxes 或者 inline boxes。所以上面的描述，即是把所有的元素劃分到對應的 formatting context 里。

精彩內容，請點擊下一頁！

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈