欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)行清除操作的元素添加上邊距,以此讓元素降到浮動元素的下面,而操作行內元素的上邊距不起作用。

相關文章

最新評論