css浮動中避免包含元素高度為0的4種解決方法
發(fā)布時間:2013-03-04 15:26:50 作者:佚名
我要評論

當一個元素只包含浮動元素的時候,它會出現(xiàn)高度折疊,即元素的上下底邊重合,和高度為0效果一樣,針對這個問題與大家分享四種解決方法,感興趣的你可以參考下本文或許對你更好的理解css有所幫助
當一個元素只包含浮動元素的時候,它會出現(xiàn)高度折疊(在火狐中是這樣,IE9不會),即元素的上下底邊重合,和高度為0效果一樣,下面是解決這個問題的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>
運行結果:
本來ul的背景色被設置成blue,但是由于它出現(xiàn)了高度折疊,所以看不到背景色。
1 給包含元素設置高度height
最直接的辦法是給包含元素設置一個高度,在本例中就是給ul標簽添加height屬性,添加后的代碼如下:
ul {
list-style-type: none;
width: 800px;
background: blue;
height: 300px; /*添加高度屬性*/
}
但是這種方法有一個缺點,就是包含元素的高度不能自適應內容。比如我們在添加多個列表項,那么高度又不夠了。
2 利用overflow屬性
可以包含元素設置overflow屬性,并設置屬性值為auto或者hidden,添加后的代碼如下:
ul {
list-style-type: none;
width: 800px;
background: blue;
overflow: hidden; /*添加overflow屬性,可以設置為auto或者hidden*/
}
這種方式沒有直接設置height屬性的限制,但是當包含元素的overflow屬性必須設置為visible時,這種方法失效。
3 添加一個空的div
這種方法是添加一個空的div,這個div和浮動元素同一級別,且位于浮動元素的最后。這種方法要改動兩個地方,一個是html代碼,另一個是必須要為這個div添加一個clear屬性:
<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
/*為添加的空div設置的樣式*/
.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,它和浮動元素同一級別,且位于最后-->
</ul>
</body>
</html>
這種方法雖然也能解決高度問題,但是卻引入了一個多余的標簽div,它這里并不具有實際意義,它的作用只是撐開ul標簽而已。
4 利用偽元素:after
用這種方法時要為包含元素先添加一個類名,這里為ul標簽設置的類名.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"> <!--為包含的外圍元素設置類-->
<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元素后面生成指定的內容,這里生成的內容是一個空字符串,因為只是讓它來消除ul標簽的高度折疊,并不讓它顯示出來。還有,這條樣式里有display屬性,要將他設置成block,這樣clear屬性才會起作用,因為清除操作只作用于塊級元素,它的原理是為要執(zhí)行清除操作的元素添加上邊距,以此讓元素降到浮動元素的下面,而操作行內元素的上邊距不起作用。
首先我么看最原始的情況,下面是代碼:
復制代碼
代碼如下:<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>
運行結果:

本來ul的背景色被設置成blue,但是由于它出現(xiàn)了高度折疊,所以看不到背景色。
1 給包含元素設置高度height
最直接的辦法是給包含元素設置一個高度,在本例中就是給ul標簽添加height屬性,添加后的代碼如下:
復制代碼
代碼如下:ul {
list-style-type: none;
width: 800px;
background: blue;
height: 300px; /*添加高度屬性*/
}
但是這種方法有一個缺點,就是包含元素的高度不能自適應內容。比如我們在添加多個列表項,那么高度又不夠了。
2 利用overflow屬性
可以包含元素設置overflow屬性,并設置屬性值為auto或者hidden,添加后的代碼如下:
復制代碼
代碼如下:ul {
list-style-type: none;
width: 800px;
background: blue;
overflow: hidden; /*添加overflow屬性,可以設置為auto或者hidden*/
}
這種方式沒有直接設置height屬性的限制,但是當包含元素的overflow屬性必須設置為visible時,這種方法失效。
3 添加一個空的div
這種方法是添加一個空的div,這個div和浮動元素同一級別,且位于浮動元素的最后。這種方法要改動兩個地方,一個是html代碼,另一個是必須要為這個div添加一個clear屬性:
復制代碼
代碼如下:<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
/*為添加的空div設置的樣式*/
.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,它和浮動元素同一級別,且位于最后-->
</ul>
</body>
</html>
這種方法雖然也能解決高度問題,但是卻引入了一個多余的標簽div,它這里并不具有實際意義,它的作用只是撐開ul標簽而已。
4 利用偽元素:after
用這種方法時要為包含元素先添加一個類名,這里為ul標簽設置的類名.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"> <!--為包含的外圍元素設置類-->
<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元素后面生成指定的內容,這里生成的內容是一個空字符串,因為只是讓它來消除ul標簽的高度折疊,并不讓它顯示出來。還有,這條樣式里有display屬性,要將他設置成block,這樣clear屬性才會起作用,因為清除操作只作用于塊級元素,它的原理是為要執(zhí)行清除操作的元素添加上邊距,以此讓元素降到浮動元素的下面,而操作行內元素的上邊距不起作用。
相關文章
- 剛入門網站設計布局的開發(fā)者肯定會碰到這樣的問題,那就是當子容器全部浮動的時候,父容器的高度不能自動撐開,今天偶也遇此問題,需要了解的朋友可以參考下2012-12-27
- 翻譯自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks,有些部分根據我的理解改了,讓一些初心者更好理解。2009-11-12
- 由于浮動的元素脫離了文檔流,所以它們不會在網頁文檔中占據空間。如果一個DIV容器中想要包含這些浮動的元素的話,有兩種辦法。2011-08-02
CSS教程:div設置float后高度不自動增加-CSS教程-網頁制作-網頁教學網
相關文章:http://www.webjx.com/css/divcss-4952.html http://www.webjx.com/css/divcss-5991.html 本來想把這個題目修改為“閉合浮動元素”或&l2008-10-17- 在進行浮動布局時,大多數(shù)人都深知,在必要的地方進行浮動清理:。2009-09-03
- 在網頁制作中經常會用到浮動。用了浮動就會涉及到一個清除浮動的問題,因為包含浮動的元素是不會自動適應高度的,也就是不會被浮動元素撐開。2010-07-23
- 在ie8、chrome瀏覽器中,包裹浮動的li元素的外層ul高度為0,ie7瀏覽器和ie8兼容模式顯示正常,下面與大家分享下多種解決方法大家可以根據情況自由選擇,希望對大家有所幫助2013-07-31