CSS文檔流與塊級元素(block)、內聯元素(inline)，之前翻閱不少書籍,看過不少文章, 看到所多的是零碎的CSS佈局基本知識,比較表面.看過O' Reilly的,發現裡面提到的文檔流概念讓我很敏感. 可惡的是書中並沒有解釋文檔流是什麼東西,或許作者覺得這個太簡單了以至於不值一提.但我覺得,這個概念實在太重要了.理解了它,一堆CSS佈局的理論都變得易於理解,並且體會到CSS這套設計的合理性所在. 於是我根據猜測,再加實驗,得出一下說法.如有錯誤,純屬正常.
文件流程
將窗體自上而下分成一行行, 並在每行中按從左到右的順序排放元素,即為文檔流.
每個非浮動區塊級元素都獨佔一行, 浮動元素則依規定浮在行的一端. 若當前行容不下, 則另起新行再浮動.
內聯元素也不會獨佔一行. 幾乎所有元素(包括區塊級,內聯和列表元素)均可產生子行, 用於擺放子元素.
有三種情況將使得元素脫離文檔流而存在,分別是浮動,絕對定位, 固定定位. 但是在IE中浮動元素也存在於文檔流中(還讓我覺得這樣很合理><).
浮動元素不佔任何正常文件流空間，而浮動元素的定位還是基於正常的文檔流，然後從文檔流中抽出並儘可能遠的移動至左側或右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文件流中抽出後，仍然在文檔流中的其他元素將忽略該元素並填補他原先的空間。
浮動概念讓人迷惑根源在於瀏覽器對理論的解讀所造成的。只能說很多人以IE做標準，其實它不是。
基於文檔流, 我們可以很容易理解以下的定位模式:
相對定位,
即相對於元素在文件流程中位置進行偏移. 但保留原佔位.
絕對定位,
即完全脫離文檔流, 相對於position屬性非static值的最近父級元素進行偏移
固定定位,
即完全脫離文檔流, 相對於視區進行偏移.
接下來還有幾個問題我搞不懂的
作為三大基本元素之一的內聯元素, 它跟塊級元素的主要區別在哪裡?
Clear屬性取right值時怎麼理解? 貌似實驗狀況總和理論不符.