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

相關文章

最新評論