| 網(wǎng)頁制作Webjx文章簡(jiǎn)介：很多人都有研究閉合浮動(dòng)元素的問題，但是解決方法卻不一樣，也并不是每一種方法都盡善盡美。閉合浮動(dòng)元素（或者叫清除浮動(dòng)）是web標(biāo)準(zhǔn)設(shè)計(jì)中經(jīng)常會(huì)遇到的一個(gè)問題，因此，這里我想總結(jié)一下目前經(jīng)常用到的幾種方法，并比較一下他們的易用性和適用環(huán)境。如果你有更好的方 |
作者：Dudo
原文連接：http://www.dudo.org/article.asp?id=239
很多人都有研究閉合浮動(dòng)元素的問題，但是解決方法卻不一樣，也并不是每一種方法都盡善盡美。閉合浮動(dòng)元素（或者叫清除浮動(dòng)）是web標(biāo)準(zhǔn)設(shè)計(jì)中經(jīng)常會(huì)遇到的一個(gè)問題，因此，這里我想總結(jié)一下目前經(jīng)常用到的幾種方法，并比較一下他們的易用性和適用環(huán)境。如果你有更好的方法不妨提出來大家一起討論。
問題的提出：
最簡(jiǎn)單的一種情形就是我們把一個(gè)小的、固定寬度的div元素（比如導(dǎo)航、引用等）和其他元素內(nèi)容一起包含在一個(gè)大的div中。比如下面這段代碼：
<div id="outer">
<div id="inner"> <h2>A Column</h2> </div>
<h1>Main Content</h1>
<p>Lorem ipsum</p>
</div>
我們可以為“#inner”設(shè)定一個(gè)寬度值（比如說20%），但是由于div是塊級(jí)元素，即使我們?cè)O(shè)定了寬度，其后面的內(nèi)容也只能在下一行中顯示，除非我們給它設(shè)定一個(gè)浮動(dòng)屬性（無論是向左浮動(dòng)或者向右浮動(dòng)）。那么此時(shí)會(huì)產(chǎn)生我們上面提到的問題了。
如果“#inner”的寬度和高度都比“#outer”小，這不會(huì)有問題。
但是，如果“#inner”的高度超過了“#outer”，那么的底部就會(huì)超出“#outer”的底部。這是因?yàn)槲覀優(yōu)?#8220;#inner”設(shè)定了float屬性后，它就會(huì)脫離的文本流，無論其寬度和高度怎么變化都不會(huì)使“#outer”跟隨變化。
例一：未清除浮動(dòng)時(shí)的布局表現(xiàn)
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
在這個(gè)例子中，最開始由于“#inner”的高度小于“#outer”所以不會(huì)有問題，但是當(dāng)你點(diǎn)擊“加長(zhǎng)”后你會(huì)發(fā)現(xiàn)“#inner”的底邊已經(jīng)超出了“#outer”的范圍，而“#outer”沒有發(fā)生改變。這就是我們所提到的“清除浮動(dòng)（閉合浮動(dòng)元素）”或者是“閉合浮動(dòng)”問題
解決辦法：
1）額外標(biāo)簽法
第一個(gè)，也是W3C推薦的方法就是使用額外標(biāo)簽的辦法。這種方法就是在內(nèi)容的末尾增加一個(gè)空的標(biāo)簽，典型的做法就是使用類似
<br style="clear:both;" />
或者使用
<div style="clear:both;"></div>
這種辦法通過增加一個(gè)HTML元素迫使外部容器撐開。不過這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡(jiǎn)潔。
例二：使用空div閉合浮動(dòng)元素
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
P.S. 我發(fā)現(xiàn)在Internet Explorer中（無論是6還是7）<br style="clear:both" />可以清除浮動(dòng)，但是不能閉合浮動(dòng)元素，在Firefox中就沒有這個(gè)問題，不知道是什么原因？！
2）使用after偽類
使用after偽類和內(nèi)容聲明在指定的現(xiàn)在內(nèi)容末尾添加新的內(nèi)容。經(jīng)常的做法就是添加一個(gè)“點(diǎn)”，因?yàn)樗容^小不太引人注意。然后我們?cè)倮盟鼇砬宄?dòng)（閉合浮動(dòng)元素），并隱藏這個(gè)內(nèi)容：
#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after偽類而Mac中的Internet Explorer卻可以正常使用，所以我們還要單獨(dú)針對(duì)Win/IE進(jìn)行處理。在區(qū)分Win和Mac中Internet Explorer的諸多方法中，最常用就是Holly招數(shù)。Holly招數(shù)的原理是這樣的，CSS代碼
/* 這段代碼只有IE/Win可以看見 \*/
CSS 規(guī)則
/* 結(jié)束Hack */
上面的代碼中有兩行注釋，其中第一行結(jié)束時(shí)出現(xiàn)了反斜杠（\），在Mac的Internet Explorer中會(huì)認(rèn)為注釋并沒有結(jié)束，于是繼續(xù)向下直到第一個(gè)完事的“*/”出現(xiàn)，這中間的所有字符都被當(dāng)作是注釋，而IE/Win卻也只會(huì)把第一行和第三行看作是注釋，中間的為有效代碼。所以這樣就區(qū)分出來了不同平臺(tái)上的IE了。
正是基于以上原理，在windows的IE 6上的清理浮動(dòng)，可以使用如下代碼：
#outer {
display:inline-block;
}
/* Holly Hack Begine \*/
* html #outer {
height:1%;
}
#outer {
display:block;
}
/* End Hack */
例三：使用:after偽類清理浮動(dòng)
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
P.S. 如果你不考慮 IE6/Mac用戶的話你只需要寫* html #outer {height:1%;}即可。
另外，似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招數(shù)。
如果你對(duì)如何使用CSS 2中的偽類不熟悉的話，推薦你先閱讀一下“細(xì)說CSS樣式選擇符——CSS 2.1 Selectors（1）、（2）、（3）”
3）浮動(dòng)外部元素，float-in-float
這種方法很簡(jiǎn)單，就是把“#outer”元素也進(jìn)行浮動(dòng)（向左或者向右）。
例子
但是這種方法帶來的別外一個(gè)問題就是和“#outer”相鄰的下一個(gè)元素會(huì)受到“#outer”的影響位置會(huì)產(chǎn)生變化，所以使用這種方法一定要小心。有選擇把頁面中的所有元素都浮動(dòng)起來，最后使用一個(gè)適當(dāng)?shù)挠幸饬x的元素（比如頁腳）進(jìn)行清理浮動(dòng)，這有助于減少不必要的標(biāo)記，但是過多的浮動(dòng)會(huì)增加布局的難度。
例四：float-in-float
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
4）設(shè)置overflow為hidden或者auto
把“#outer”的屬性overflow值設(shè)置為hidden或者auto同樣可以清理浮動(dòng)
這種方法不需要添加額外的標(biāo)記。但是使用overflow的時(shí)候一定要小心，因?yàn)樗鼤?huì)瀏覽器的表現(xiàn)。另外，在Internet Explorer 6中單純地設(shè)置overflow為hidden或者auto并不能有效清除浮動(dòng)（閉合浮動(dòng)元素），還要指定“#outer”的一個(gè)維度，即要么給它指定一個(gè)寬度，要么指定一個(gè)高度：
#outer {
overflow:auto;
width:100%;
}
注意：如果你要在IE5/Mac上使用這種方法清除浮動(dòng)（閉合浮動(dòng)元素）的話，你就必須設(shè)定overflow的屬性為值為hidden。
例五：overflow:hidden
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
比較與選擇
四種方法中使用哪種最好呢？首先，不推薦使用after偽類，對(duì)比其它三種方法，holly招數(shù)有點(diǎn)太煩瑣，不好掌握，我上面講到的holly招數(shù)中并不僅僅是IE/Win上有問題，當(dāng)出現(xiàn):hover時(shí)還會(huì)有其它問題，所以我們又加上了inline-block等屬性，也就是說這種方法存在更多的不確定性。推薦對(duì)代碼有“潔癖”并且技術(shù)較高的人使用。
那么其它三種方法其實(shí)都可以考慮。
不過使用overflow的時(shí)候，可能會(huì)對(duì)頁面表現(xiàn)帶來影響，而且這種影響是不確定的，你最好是能在多個(gè)瀏覽器上測(cè)試你的頁面；
而對(duì)于使用額外標(biāo)簽清除浮動(dòng)（閉合浮動(dòng)元素），是W3C推薦的做法。至于使用<br />元素還是空<div></div>可以根據(jù)自己的喜好來選（當(dāng)然你也可以使用其它塊級(jí)元素）。不過要注意的是，<br />本身是有表現(xiàn)的，它會(huì)多出一個(gè)換行出來，所以要設(shè)定它的heigh為0，以隱藏它的表現(xiàn)。所以大多數(shù)情況下使用空<div>比較合適。
float-in-float，也是一個(gè)很好的選擇，把你要進(jìn)行清理浮動(dòng)的元素外層再加上一層<div>并設(shè)置屬性fload:left即可，不過要注意相鄰元素的變化。