浮動(dòng)層自動(dòng)適應(yīng)高度的解決方法
發(fā)布時(shí)間：2010-07-23 18:36:21 作者：佚名 
我要評(píng)論
我要評(píng)論在網(wǎng)頁制作中經(jīng)常會(huì)用到浮動(dòng)。用了浮動(dòng)就會(huì)涉及到一個(gè)清除浮動(dòng)的問題，因?yàn)榘?dòng)的元素是不會(huì)自動(dòng)適應(yīng)高度的，也就是不會(huì)被浮動(dòng)元素?fù)伍_。
先看一個(gè)例子：
HTML:
<ul>
<li></li>
<li></li>
</ul>
CSS:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
在各個(gè)瀏覽器中的效果一致：
可以看到，外面 ul 即藍(lán)色的區(qū)域高度為0，如果沒有設(shè)置 padding，這個(gè) ul 是看不到的。當(dāng)然要讓它伸長(zhǎng)也很簡(jiǎn)單，只需要在最后一個(gè) li 后面加一個(gè)標(biāo)簽清楚下浮動(dòng)就可以了。不過這樣的話就改變了HTML結(jié)構(gòu)，不好。現(xiàn)在這里要討論的就是如何在不改變結(jié)構(gòu)的情況下讓 ul 自動(dòng)伸長(zhǎng)。
注意：自動(dòng)伸長(zhǎng)針對(duì)的是包含浮動(dòng)元素的元素(這里是 ul)。而不是浮動(dòng)元素自身(li)。
第一種方法：
IE 支持一個(gè) CSS 屬性 zoom， 這個(gè)元素接受一個(gè)數(shù)字或一個(gè)百分?jǐn)?shù)，表示這個(gè)元素放大（縮小）的比例。例如：zoom:0.5或zoom:50% 表示縮小一半，而zoom:2或zoom:200%則表示放大一倍。
當(dāng)定義了這個(gè)屬性之后在 IE 瀏覽器里面就會(huì)自動(dòng)適應(yīng)高度了。當(dāng)應(yīng)用了這個(gè)屬性之后，IE 就會(huì)自動(dòng)伸長(zhǎng)了。一般情況下我們不需要放大或縮小，所以定義 zoom:1 就行了?，F(xiàn)在的 CSS：
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1; /* IE */
}
而非 IE 瀏覽器不支持這個(gè)屬性。所以第一種方法需把瀏覽器分為兩個(gè)陣營(yíng)：IE 和 非IE。
對(duì)于非 IE 瀏覽器需要用到一個(gè)偽類 :after (IE 瀏覽器不支持)。CSS 代碼如下：
ul:after {
content:".";
display:block;
clear:both;
height:0;
}
:after 偽類用于向元素后面插入一段內(nèi)容，即 content 屬性。然后在這個(gè)插入的內(nèi)容里清除浮動(dòng)，我們可以想象成在最后一個(gè) <li> 后面插入了一個(gè) <span>.</span>里面的內(nèi)容是一個(gè)”.”，然后設(shè)置display:block; clear:both; height:0; 等屬性 (這個(gè)比喻不一定準(zhǔn)確)。
我們看下在 Firefox 下面的效果：
可以看到 ul 已經(jīng)自動(dòng)伸長(zhǎng)了，但下面有個(gè)小小的黑點(diǎn)。相信你已經(jīng)猜到了，這個(gè)黑點(diǎn)對(duì)應(yīng)的就是 content:”.” 。
這個(gè)黑點(diǎn)肯定是要去掉的啦，我們可以用 font-size:0;line-height:0; 將其去掉。
好了，現(xiàn)在在兩個(gè)陣營(yíng)的瀏覽器里都實(shí)現(xiàn)目標(biāo)了。以下是 ul 所有的CSS代碼：
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;/* IE */
}
ul:after {
content:".";
display:block;
clear:both;
height:0;
font-size:0;
line-height:0;
}
第二種方法
我剛說過不止一種方法可以解決，那現(xiàn)在就來說說第二種方法。第二種方法還要更簡(jiǎn)單一些。同樣，需要將瀏覽器分成兩個(gè)陣營(yíng)。不過和上一個(gè)有所不同，這一次 IE7 站到了另外一個(gè)陣營(yíng)。即 IE7, Firefox, Opera, Safari 等(這里暫時(shí)稱為A瀏覽器)。對(duì)于這些瀏覽器，只要定義一個(gè) overflow:auto; 即可，但是對(duì)于 IE6 和 IE5 (稱為B瀏覽器)卻不起作用。不過要 IE6，IE5 聽話也很簡(jiǎn)單。只要定義一個(gè)高度即可，哪怕是 0 ，也會(huì)自動(dòng)伸長(zhǎng)。知道這些還沒用，我們還得區(qū)分這兩個(gè)陣營(yíng)的瀏覽器才行。怎么區(qū)分呢？
A 瀏覽器支持屬性選擇符，而B瀏覽器不支持。
所以以下代碼只有A瀏覽器才會(huì)執(zhí)行。
[xmlns] ul { /* html[xmlns] ul 的簡(jiǎn)寫 */
overflow:auto;
}
需要注意的是HTML 必須要有< !DOCTYPE >頭部以及<html>有xmlns屬性才會(huì)起作用。不過這個(gè)問題似乎不大，現(xiàn)在絕大部分網(wǎng)頁都有這兩個(gè)東東，包括 Dreamweaver 默認(rèn)新建的網(wǎng)頁都會(huì)自動(dòng)加上。
而對(duì)于B瀏覽器則可以通過以下方式：
* html ul {
height:1%;
}
其實(shí) height 完全可以寫成 0，為什么要寫1%呢？告訴你其實(shí)我也不知道，大家都這么寫。
好了，第二種方法的 ul 全部樣式代碼如下：
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul { /*html[xmlns] ul 的簡(jiǎn)寫*/
overflow:auto;
}
* html ul {
height:1%;
}
現(xiàn)在既然有兩種方法，那么那一種更好呢？我個(gè)人比較喜歡第二種方法。原因很簡(jiǎn)單，代碼更少，而且是符合標(biāo)準(zhǔn)的。只是在極少數(shù)情況下會(huì)出現(xiàn)滾動(dòng)條，所以應(yīng)該這兩種方法配合使用。
還有，這些代碼是可以通用的，可以提取為一個(gè)類比如 .clearfix 。這個(gè)任務(wù)就交給你自己完成吧。
HTML:
復(fù)制代碼
代碼如下:<ul>
<li></li>
<li></li>
</ul>
CSS:
復(fù)制代碼
代碼如下:ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
在各個(gè)瀏覽器中的效果一致：
可以看到，外面 ul 即藍(lán)色的區(qū)域高度為0，如果沒有設(shè)置 padding，這個(gè) ul 是看不到的。當(dāng)然要讓它伸長(zhǎng)也很簡(jiǎn)單，只需要在最后一個(gè) li 后面加一個(gè)標(biāo)簽清楚下浮動(dòng)就可以了。不過這樣的話就改變了HTML結(jié)構(gòu)，不好。現(xiàn)在這里要討論的就是如何在不改變結(jié)構(gòu)的情況下讓 ul 自動(dòng)伸長(zhǎng)。
注意：自動(dòng)伸長(zhǎng)針對(duì)的是包含浮動(dòng)元素的元素(這里是 ul)。而不是浮動(dòng)元素自身(li)。
第一種方法：
IE 支持一個(gè) CSS 屬性 zoom， 這個(gè)元素接受一個(gè)數(shù)字或一個(gè)百分?jǐn)?shù)，表示這個(gè)元素放大（縮小）的比例。例如：zoom:0.5或zoom:50% 表示縮小一半，而zoom:2或zoom:200%則表示放大一倍。
當(dāng)定義了這個(gè)屬性之后在 IE 瀏覽器里面就會(huì)自動(dòng)適應(yīng)高度了。當(dāng)應(yīng)用了這個(gè)屬性之后，IE 就會(huì)自動(dòng)伸長(zhǎng)了。一般情況下我們不需要放大或縮小，所以定義 zoom:1 就行了?，F(xiàn)在的 CSS：
復(fù)制代碼
代碼如下:ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1; /* IE */
}
而非 IE 瀏覽器不支持這個(gè)屬性。所以第一種方法需把瀏覽器分為兩個(gè)陣營(yíng)：IE 和 非IE。
對(duì)于非 IE 瀏覽器需要用到一個(gè)偽類 :after (IE 瀏覽器不支持)。CSS 代碼如下：
復(fù)制代碼
代碼如下:ul:after {
content:".";
display:block;
clear:both;
height:0;
}
:after 偽類用于向元素后面插入一段內(nèi)容，即 content 屬性。然后在這個(gè)插入的內(nèi)容里清除浮動(dòng)，我們可以想象成在最后一個(gè) <li> 后面插入了一個(gè) <span>.</span>里面的內(nèi)容是一個(gè)”.”，然后設(shè)置display:block; clear:both; height:0; 等屬性 (這個(gè)比喻不一定準(zhǔn)確)。
我們看下在 Firefox 下面的效果：
可以看到 ul 已經(jīng)自動(dòng)伸長(zhǎng)了，但下面有個(gè)小小的黑點(diǎn)。相信你已經(jīng)猜到了，這個(gè)黑點(diǎn)對(duì)應(yīng)的就是 content:”.” 。
這個(gè)黑點(diǎn)肯定是要去掉的啦，我們可以用 font-size:0;line-height:0; 將其去掉。
好了，現(xiàn)在在兩個(gè)陣營(yíng)的瀏覽器里都實(shí)現(xiàn)目標(biāo)了。以下是 ul 所有的CSS代碼：
復(fù)制代碼
代碼如下:ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;/* IE */
}
ul:after {
content:".";
display:block;
clear:both;
height:0;
font-size:0;
line-height:0;
}
第二種方法
我剛說過不止一種方法可以解決，那現(xiàn)在就來說說第二種方法。第二種方法還要更簡(jiǎn)單一些。同樣，需要將瀏覽器分成兩個(gè)陣營(yíng)。不過和上一個(gè)有所不同，這一次 IE7 站到了另外一個(gè)陣營(yíng)。即 IE7, Firefox, Opera, Safari 等(這里暫時(shí)稱為A瀏覽器)。對(duì)于這些瀏覽器，只要定義一個(gè) overflow:auto; 即可，但是對(duì)于 IE6 和 IE5 (稱為B瀏覽器)卻不起作用。不過要 IE6，IE5 聽話也很簡(jiǎn)單。只要定義一個(gè)高度即可，哪怕是 0 ，也會(huì)自動(dòng)伸長(zhǎng)。知道這些還沒用，我們還得區(qū)分這兩個(gè)陣營(yíng)的瀏覽器才行。怎么區(qū)分呢？
A 瀏覽器支持屬性選擇符，而B瀏覽器不支持。
所以以下代碼只有A瀏覽器才會(huì)執(zhí)行。
復(fù)制代碼
代碼如下:[xmlns] ul { /* html[xmlns] ul 的簡(jiǎn)寫 */
overflow:auto;
}
需要注意的是HTML 必須要有< !DOCTYPE >頭部以及<html>有xmlns屬性才會(huì)起作用。不過這個(gè)問題似乎不大，現(xiàn)在絕大部分網(wǎng)頁都有這兩個(gè)東東，包括 Dreamweaver 默認(rèn)新建的網(wǎng)頁都會(huì)自動(dòng)加上。
而對(duì)于B瀏覽器則可以通過以下方式：
復(fù)制代碼
代碼如下:* html ul {
height:1%;
}
其實(shí) height 完全可以寫成 0，為什么要寫1%呢？告訴你其實(shí)我也不知道，大家都這么寫。
好了，第二種方法的 ul 全部樣式代碼如下：
復(fù)制代碼
代碼如下:ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul { /*html[xmlns] ul 的簡(jiǎn)寫*/
overflow:auto;
}
* html ul {
height:1%;
}
現(xiàn)在既然有兩種方法，那么那一種更好呢？我個(gè)人比較喜歡第二種方法。原因很簡(jiǎn)單，代碼更少，而且是符合標(biāo)準(zhǔn)的。只是在極少數(shù)情況下會(huì)出現(xiàn)滾動(dòng)條，所以應(yīng)該這兩種方法配合使用。
還有，這些代碼是可以通用的，可以提取為一個(gè)類比如 .clearfix 。這個(gè)任務(wù)就交給你自己完成吧。
相關(guān)文章
- 當(dāng)一個(gè)元素只包含浮動(dòng)元素的時(shí)候，它會(huì)出現(xiàn)高度折疊，即元素的上下底邊重合，和高度為0效果一樣，針對(duì)這個(gè)問題與大家分享四種解決方法，感興趣的你可以參考下本文或許對(duì)你2013-03-04
解決子容器全部浮動(dòng)時(shí)父容器高度不能自動(dòng)撐開的方法
剛?cè)腴T網(wǎng)站設(shè)計(jì)布局的開發(fā)者肯定會(huì)碰到這樣的問題，那就是當(dāng)子容器全部浮動(dòng)的時(shí)候，父容器的高度不能自動(dòng)撐開,今天偶也遇此問題，需要了解的朋友可以參考下2012-12-27純CSS無hacks的跨游覽器自適應(yīng)高度多列布局 推薦
翻譯自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks，有些部分根據(jù)我的理解改了，讓一些初心者更好理解。2009-11-12- 由于浮動(dòng)的元素脫離了文檔流，所以它們不會(huì)在網(wǎng)頁文檔中占據(jù)空間。如果一個(gè)DIV容器中想要包含這些浮動(dòng)的元素的話，有兩種辦法。2011-08-02
CSS教程：div設(shè)置float后高度不自動(dòng)增加-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
相關(guān)文章：http://www.webjx.com/css/divcss-4952.html http://www.webjx.com/css/divcss-5991.html 本來想把這個(gè)題目修改為“閉合浮動(dòng)元素”或&l2008-10-17- 在進(jìn)行浮動(dòng)布局時(shí)，大多數(shù)人都深知，在必要的地方進(jìn)行浮動(dòng)清理：。2009-09-03
Css浮動(dòng)元素外層容器高度為0(無高度)的解決方法
在ie8、chrome瀏覽器中，包裹浮動(dòng)的li元素的外層ul高度為0，ie7瀏覽器和ie8兼容模式顯示正常，下面與大家分享下多種解決方法大家可以根據(jù)情況自由選擇，希望對(duì)大家有所幫助2013-07-31