|
組合上面的定義，并且姑且先把 formatting context 看做是一種范圍限定，那么具體講，普通流就是這樣的過程：
1.在對應的 block formatting context 中，塊級元素按照其在HTML中的順序，在其容器框里從左上角開始，從上到下垂直地依次分配空間、堆砌( stack )，并獨占一行，邊界緊貼父容器。兩相鄰元素間的距離由 margin 屬性決定，在同一個 block formatting context 中的垂直邊界將被重疊( collapse )。并且，除非創(chuàng)建一個新的 block formatting context ，否則塊級元素的寬度不受浮動元素的影響(這就是浮動元素能蓋在塊級元素上面的原因)。
2.在對應的 inline formatting context 中，行內(nèi)元素從容器的頂端開始，一個接一個地水平排布。水平填充、邊框和邊距對行內(nèi)元素有效。但垂直的填充、邊框和空白邊不影響其高度。一個水平行中的所有 inline box 組成了名為 line box 的矩形區(qū)域。 line box 的高度始終容下所有的 inline box ，并只與行高有關(guān)。 line box 的寬度受到父容器和浮動元素存在的影響(這就是文本環(huán)繞浮動元素)。如果 line box 的寬度小于容器， line box 的水平排布就取決于 text-align 。如果 line box 的寬度大于容器，則截斷 line box 并換行在新的 line box 中重新排布元素(截斷處不應用 padding 和 margin 值)。如果 line box 無法截斷，如單詞過長或者指定不換行，則會溢出容器。
3.對這些 block box 和 inline box 進行相對定位，即相對于已排布的位置進行偏移。元素在其中保留原來所占用的空間。
說了一堆東西，其實就只是在說如何排布元素而已。那些都非常容易理解，除了一個概念—— formatting context 。
什么是 formatting context ？ context 總是解釋為上下文環(huán)境，那么格式化上下文就應該是指格式化時的前后關(guān)系。
然而對此，標準里沒有更多的定義和解釋。
雖然 mozilla developer center 上沒有關(guān)于 inline formatting context 的資料，但是卻有關(guān)于 block formatting context 的描述：一個 block formatting context 是web頁面可視化CSS渲染的一個部分，是一塊 block boxes 排布以及 float 元素相互作用的區(qū)域。
用自己的話簡言之，那是一個作用范圍�？梢园阉斫獬墒且粋�獨立的容器，并且這個容器的里box的布局，與這個容器外的毫不相干。
下面的這些情況，都會創(chuàng)建一個新的 block formatting context：
- 根元素
- 浮動或絕對定位的元素
- display 值為 inline-blocks ， table-cell 或 table-caption
- overflow 值為非 visible
雖然標準里沒有提到根元素會創(chuàng)建新的 block formatting context ，但是mozilla提到了，并且這也解釋了初始的一個上下文環(huán)境的建立。
這里有個建立( establishes )的概念，這個概念和建立容器塊( containing block )的概念類似。比如，A是B父元素，當B被渲染時其位置和大小會參照一個容器塊，這個容器塊是由其父元素A建立的。是的，有點簡單問題復雜化。雖然實質(zhì)上父元素就是子元素的容器，但是過程中間卻有個建立( establishes )的概念。并且這個創(chuàng)建的概念被應用于其他作用范圍，包括 block formatting context 。
想想我們平常在做的事情。當一個父元素因為子元素浮動而導致高度為0的時候，也許我們會習慣的加上這樣的規(guī)則：
overflow:hidden;zoom:1; 。
overflow:hidden 不正是創(chuàng)建了一個新的 block formatting context 嗎？那么 zoom:1 是怎么回事？這不得不提到 IE 私有的 hasLayout ，一個和 block formatting context 行為相仿的IE特產(chǎn)。對于 hasLayout ，本文不做討論。可以閱讀那篇有名的 On having layout ，中文版由 old9 翻譯過，但是鏈接似乎暫時掛掉了，所以可以看看藍色理想上轉(zhuǎn)載的版本。
這就是為什么浮動元素總是容納浮動元素的原因——浮動元素創(chuàng)建了新的 block formatting context，其內(nèi)部的布局不在和外部有關(guān)。比如內(nèi)部的浮動清除不會再影響到外部，并且內(nèi)部的浮動對于外部而言也是不可見的。這也是為什么《精通CSS》會說 “應用值為 hidden 或 auto 的 overflow 屬性會自動地清理任何浮動元素” 的原因。同時，這也是為什么有的時候必須用清除浮動而不是設(shè)置overflow來使父容器容納浮動元素，因為 “設(shè)置框的overflow屬性會影響它的表現(xiàn)”。
出處：藍色理想
責任編輯：bluehearts
上一頁 CSS定位機制之一:普通流 [1] 下一頁 CSS定位機制之一:普通流 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 CSS定位機制之一:普通流 [2]
