|
舉個(gè)實(shí)際當(dāng)中的常見(jiàn)例子，比如垂直邊距疊加問(wèn)題：
代碼:
<html>
<head></head>
<body>
<div id="A" style="background:gray;margin-top:20px;">
<div id="B" style="margin-top:10px;">
我有10px m-t
</div>
</div>
</body>
</html>
如果在現(xiàn)代的瀏覽器里運(yùn)行，那么 B 的10px上邊距將會(huì)和父元素 A 的20px上邊距重疊起來(lái)，從而看起來(lái)就好像 B 沒(méi)有上邊距一樣。就像前面說(shuō)的那樣，同一個(gè) block formatting context 中的垂直邊界將被重疊。那么不同 block formatting context 呢？
這種情況，如果不想加邊框( border:1px solid transparent; )解決的話，那么就需要 A 建立一個(gè)新的 block formatting context 將 B 包裹起來(lái)，那么 A 的上邊距和 B 的上邊距就毫不相干了。可以用浮動(dòng)，也可以加 overflow ，這要看具體情況。
代碼:
<html>
<head></head>
<body>
<div id="A" style="background:gray;margin-top:20px;overflow:auto;">
<div id="B" style="margin-top:10px;">
我有10px m-t
</div>
</div>
</body>
</html>
再一個(gè)例子，回頭看下上面過(guò)程里這樣的一句：除非創(chuàng)建一個(gè)新的 block formatting context ，否則塊級(jí)元素的布局不受浮動(dòng)元素的影響。
這是造成元素重疊的原因。比如下面的代碼：
代碼:
<html>
<head></head>
<body>
<div id="A" style="background:gray;overflow:auto;">
<div id="B" style="background:green;margin:10px 10px 0 0;float:right;">
浮動(dòng)元素m_10_10_0_0
</div>
<div id="C" style="background:red;">
普通流塊
</div>
</div>
</body>
</html>
普通流塊 C 在容器 A 里排布的時(shí)候，并不受浮動(dòng)元素的影響，甚至當(dāng)浮動(dòng)元素 B 不存在。但是如果 C 創(chuàng)建了新的 block formatting context ，那么，普通流塊c就會(huì)像 line box 一樣受到浮動(dòng)元素存在的影響而縮小。
代碼:
<html>
<head></head>
<body>
<div id="A" style="background:gray;overflow:auto;">
<div id="B" style="background:green;margin:10px 10px 0 0;float:right;">
浮動(dòng)元素m_10_10_0_0
</div>
<div id="C" style="background:red;overflow:auto;">
普通流塊
</div>
</div>
</body>
</html>
關(guān)于浮動(dòng)和 block formatting context ，brunildo.org 上有一份不錯(cuò)的參考。
說(shuō)了這么多了，其實(shí)概念仍然可以很簡(jiǎn)單。普通流僅僅只是一種定位的機(jī)制。而flow本身在標(biāo)準(zhǔn)里也可以作為一個(gè)動(dòng)詞，就如同按順序一個(gè)個(gè)的拿出HTML元素然后放到頁(yè)面上一般。只是要注意一下 formatting context 的概念，特別是 block formatting context ，因?yàn)槠溆绊懜?包括邊距重疊、浮動(dòng)清除、元素重疊等)。
寫(xiě)到這里也就差不多了，由于水平所限，如文中有不當(dāng)之處，請(qǐng)指點(diǎn)下，非常感謝。謝謝閱讀
經(jīng)典論壇交流：http://bbs.blueidea.com/thread-2994612-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2010/7875.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) CSS定位機(jī)制之一:普通流 [2] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) CSS定位機(jī)制之一:普通流 [3]
