css浮動(dòng)中避免包含元素高度為0的4種解決方法
發(fā)布時(shí)間：2013-03-04 15:26:50 作者：佚名 
我要評(píng)論
我要評(píng)論當(dāng)一個(gè)元素只包含浮動(dòng)元素的時(shí)候，它會(huì)出現(xiàn)高度折疊，即元素的上下底邊重合，和高度為0效果一樣，針對(duì)這個(gè)問(wèn)題與大家分享四種解決方法，感興趣的你可以參考下本文或許對(duì)你更好的理解css有所幫助
當(dāng)一個(gè)元素只包含浮動(dòng)元素的時(shí)候，它會(huì)出現(xiàn)高度折疊(在火狐中是這樣，IE9不會(huì)),即元素的上下底邊重合，和高度為0效果一樣，下面是解決這個(gè)問(wèn)題的4種方法。
首先我么看最原始的情況，下面是代碼:
<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
</style>
</head>
<body>
<ul>
<li><img src = "1.jpg" /></li>
<li><img src = "2.jpg" /></li>
<li><img src = "3.jpg" /></li>
<li><img src = "4.jpg" /></li>
<li><img src = "5.jpg" /></li>
<li><img src = "6.jpg" /></li>
</ul>
</body>
</html>
運(yùn)行結(jié)果:
本來(lái)ul的背景色被設(shè)置成blue，但是由于它出現(xiàn)了高度折疊，所以看不到背景色。
1 給包含元素設(shè)置高度height
最直接的辦法是給包含元素設(shè)置一個(gè)高度，在本例中就是給ul標(biāo)簽添加height屬性，添加后的代碼如下:
ul {
list-style-type: none;
width: 800px;
background: blue;
height: 300px; /*添加高度屬性*/
}
但是這種方法有一個(gè)缺點(diǎn)，就是包含元素的高度不能自適應(yīng)內(nèi)容。比如我們?cè)谔砑佣鄠€(gè)列表項(xiàng)，那么高度又不夠了。
2 利用overflow屬性
可以包含元素設(shè)置overflow屬性，并設(shè)置屬性值為auto或者h(yuǎn)idden，添加后的代碼如下:
ul {
list-style-type: none;
width: 800px;
background: blue;
overflow: hidden; /*添加overflow屬性，可以設(shè)置為auto或者h(yuǎn)idden*/
}
這種方式?jīng)]有直接設(shè)置height屬性的限制，但是當(dāng)包含元素的overflow屬性必須設(shè)置為visible時(shí)，這種方法失效。
3 添加一個(gè)空的div
這種方法是添加一個(gè)空的div，這個(gè)div和浮動(dòng)元素同一級(jí)別，且位于浮動(dòng)元素的最后。這種方法要改動(dòng)兩個(gè)地方，一個(gè)是html代碼，另一個(gè)是必須要為這個(gè)div添加一個(gè)clear屬性：
<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
/*為添加的空div設(shè)置的樣式*/
.clearDiv {
clear: both;
}
</style>
</head>
<body>
<ul>
<li><img src = "1.jpg" /></li>
<li><img src = "2.jpg" /></li>
<li><img src = "3.jpg" /></li>
<li><img src = "4.jpg" /></li>
<li><img src = "5.jpg" /></li>
<li><img src = "6.jpg" /></li>
<div class = "clearDiv"></div> <!--新添加的空div，它和浮動(dòng)元素同一級(jí)別，且位于最后-->
</ul>
</body>
</html>
這種方法雖然也能解決高度問(wèn)題，但是卻引入了一個(gè)多余的標(biāo)簽div，它這里并不具有實(shí)際意義，它的作用只是撐開(kāi)ul標(biāo)簽而已。
4 利用偽元素:after
用這種方法時(shí)要為包含元素先添加一個(gè)類名，這里為ul標(biāo)簽設(shè)置的類名.clearUl,代碼如下:
<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
/*利用:after偽元素*/
.clearUl:after {
content:"";
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class = "clearUl"> <!--為包含的外圍元素設(shè)置類-->
<li><img src = "1.jpg" /></li>
<li><img src = "2.jpg" /></li>
<li><img src = "3.jpg" /></li>
<li><img src = "4.jpg" /></li>
<li><img src = "5.jpg" /></li>
<li><img src = "6.jpg" /></li>
</ul>
</body>
</html>
在:after為元素里面用到了content屬性，這樣這條樣式的意思是在ul元素后面生成指定的內(nèi)容，這里生成的內(nèi)容是一個(gè)空字符串，因?yàn)橹皇亲屗鼇?lái)消除ul標(biāo)簽的高度折疊，并不讓它顯示出來(lái)。還有，這條樣式里有display屬性，要將他設(shè)置成block，這樣clear屬性才會(huì)起作用，因?yàn)榍宄僮髦蛔饔糜趬K級(jí)元素，它的原理是為要執(zhí)行清除操作的元素添加上邊距，以此讓元素降到浮動(dòng)元素的下面，而操作行內(nèi)元素的上邊距不起作用。
首先我么看最原始的情況，下面是代碼:
復(fù)制代碼
代碼如下:<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
</style>
</head>
<body>
<ul>
<li><img src = "1.jpg" /></li>
<li><img src = "2.jpg" /></li>
<li><img src = "3.jpg" /></li>
<li><img src = "4.jpg" /></li>
<li><img src = "5.jpg" /></li>
<li><img src = "6.jpg" /></li>
</ul>
</body>
</html>
運(yùn)行結(jié)果:
本來(lái)ul的背景色被設(shè)置成blue，但是由于它出現(xiàn)了高度折疊，所以看不到背景色。
1 給包含元素設(shè)置高度height
最直接的辦法是給包含元素設(shè)置一個(gè)高度，在本例中就是給ul標(biāo)簽添加height屬性，添加后的代碼如下:
復(fù)制代碼
代碼如下:ul {
list-style-type: none;
width: 800px;
background: blue;
height: 300px; /*添加高度屬性*/
}
但是這種方法有一個(gè)缺點(diǎn)，就是包含元素的高度不能自適應(yīng)內(nèi)容。比如我們?cè)谔砑佣鄠€(gè)列表項(xiàng)，那么高度又不夠了。
2 利用overflow屬性
可以包含元素設(shè)置overflow屬性，并設(shè)置屬性值為auto或者h(yuǎn)idden，添加后的代碼如下:
復(fù)制代碼
代碼如下:ul {
list-style-type: none;
width: 800px;
background: blue;
overflow: hidden; /*添加overflow屬性，可以設(shè)置為auto或者h(yuǎn)idden*/
}
這種方式?jīng)]有直接設(shè)置height屬性的限制，但是當(dāng)包含元素的overflow屬性必須設(shè)置為visible時(shí)，這種方法失效。
3 添加一個(gè)空的div
這種方法是添加一個(gè)空的div，這個(gè)div和浮動(dòng)元素同一級(jí)別，且位于浮動(dòng)元素的最后。這種方法要改動(dòng)兩個(gè)地方，一個(gè)是html代碼，另一個(gè)是必須要為這個(gè)div添加一個(gè)clear屬性：
復(fù)制代碼
代碼如下:<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
/*為添加的空div設(shè)置的樣式*/
.clearDiv {
clear: both;
}
</style>
</head>
<body>
<ul>
<li><img src = "1.jpg" /></li>
<li><img src = "2.jpg" /></li>
<li><img src = "3.jpg" /></li>
<li><img src = "4.jpg" /></li>
<li><img src = "5.jpg" /></li>
<li><img src = "6.jpg" /></li>
<div class = "clearDiv"></div> <!--新添加的空div，它和浮動(dòng)元素同一級(jí)別，且位于最后-->
</ul>
</body>
</html>
這種方法雖然也能解決高度問(wèn)題，但是卻引入了一個(gè)多余的標(biāo)簽div，它這里并不具有實(shí)際意義，它的作用只是撐開(kāi)ul標(biāo)簽而已。
4 利用偽元素:after
用這種方法時(shí)要為包含元素先添加一個(gè)類名，這里為ul標(biāo)簽設(shè)置的類名.clearUl,代碼如下:
復(fù)制代碼
代碼如下:<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
/*利用:after偽元素*/
.clearUl:after {
content:"";
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class = "clearUl"> <!--為包含的外圍元素設(shè)置類-->
<li><img src = "1.jpg" /></li>
<li><img src = "2.jpg" /></li>
<li><img src = "3.jpg" /></li>
<li><img src = "4.jpg" /></li>
<li><img src = "5.jpg" /></li>
<li><img src = "6.jpg" /></li>
</ul>
</body>
</html>
在:after為元素里面用到了content屬性，這樣這條樣式的意思是在ul元素后面生成指定的內(nèi)容，這里生成的內(nèi)容是一個(gè)空字符串，因?yàn)橹皇亲屗鼇?lái)消除ul標(biāo)簽的高度折疊，并不讓它顯示出來(lái)。還有，這條樣式里有display屬性，要將他設(shè)置成block，這樣clear屬性才會(huì)起作用，因?yàn)榍宄僮髦蛔饔糜趬K級(jí)元素，它的原理是為要執(zhí)行清除操作的元素添加上邊距，以此讓元素降到浮動(dòng)元素的下面，而操作行內(nèi)元素的上邊距不起作用。
相關(guān)文章
解決子容器全部浮動(dòng)時(shí)父容器高度不能自動(dòng)撐開(kāi)的方法
剛?cè)腴T(mén)網(wǎng)站設(shè)計(jì)布局的開(kāi)發(fā)者肯定會(huì)碰到這樣的問(wèn)題，那就是當(dāng)子容器全部浮動(dòng)的時(shí)候，父容器的高度不能自動(dòng)撐開(kāi),今天偶也遇此問(wèn)題，需要了解的朋友可以參考下2012-12-27純CSS無(wú)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)頁(yè)文檔中占據(jù)空間。如果一個(gè)DIV容器中想要包含這些浮動(dòng)的元素的話，有兩種辦法。2011-08-02
CSS教程：div設(shè)置float后高度不自動(dòng)增加-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
相關(guān)文章：http://www.webjx.com/css/divcss-4952.html http://www.webjx.com/css/divcss-5991.html 本來(lái)想把這個(gè)題目修改為“閉合浮動(dòng)元素”或&l2008-10-17- 在進(jìn)行浮動(dòng)布局時(shí)，大多數(shù)人都深知，在必要的地方進(jìn)行浮動(dòng)清理：。2009-09-03
浮動(dòng)層自動(dòng)適應(yīng)高度的解決方法
在網(wǎng)頁(yè)制作中經(jīng)常會(huì)用到浮動(dòng)。用了浮動(dòng)就會(huì)涉及到一個(gè)清除浮動(dòng)的問(wèn)題，因?yàn)榘?dòng)的元素是不會(huì)自動(dòng)適應(yīng)高度的，也就是不會(huì)被浮動(dòng)元素?fù)伍_(kāi)。2010-07-23Css浮動(dòng)元素外層容器高度為0(無(wú)高度)的解決方法
在ie8、chrome瀏覽器中，包裹浮動(dòng)的li元素的外層ul高度為0，ie7瀏覽器和ie8兼容模式顯示正常，下面與大家分享下多種解決方法大家可以根據(jù)情況自由選擇，希望對(duì)大家有所幫助2013-07-31