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

浮動層自動適應高度的解決方法

  發(fā)布時間：2010-07-23 18:36:21   作者：佚名   我要評論
在網頁制作中經常會用到浮動。用了浮動就會涉及到一個清除浮動的問題，因為包含浮動的元素是不會自動適應高度的，也就是不會被浮動元素撐開。
先看一個例子：
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;
}

在各個瀏覽器中的效果一致：

可以看到，外面 ul 即藍色的區(qū)域高度為0，如果沒有設置 padding，這個 ul 是看不到的。當然要讓它伸長也很簡單，只需要在最后一個 li 后面加一個標簽清楚下浮動就可以了。不過這樣的話就改變了HTML結構，不好?，F(xiàn)在這里要討論的就是如何在不改變結構的情況下讓 ul 自動伸長。

注意：自動伸長針對的是包含浮動元素的元素(這里是 ul)。而不是浮動元素自身(li)。

第一種方法：
IE 支持一個 CSS 屬性 zoom， 這個元素接受一個數(shù)字或一個百分數(shù)，表示這個元素放大（縮小）的比例。例如：zoom:0.5或zoom:50% 表示縮小一半，而zoom:2或zoom:200%則表示放大一倍。
當定義了這個屬性之后在 IE 瀏覽器里面就會自動適應高度了。當應用了這個屬性之后，IE 就會自動伸長了。一般情況下我們不需要放大或縮小，所以定義 zoom:1 就行了?，F(xiàn)在的 CSS：

復制代碼
代碼如下:

ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1; /* IE */
}

而非 IE 瀏覽器不支持這個屬性。所以第一種方法需把瀏覽器分為兩個陣營：IE 和 非IE。
對于非 IE 瀏覽器需要用到一個偽類 :after (IE 瀏覽器不支持)。CSS 代碼如下：

復制代碼
代碼如下:

ul:after {
content:".";
display:block;
clear:both;
height:0;
}

:after 偽類用于向元素后面插入一段內容，即 content 屬性。然后在這個插入的內容里清除浮動，我們可以想象成在最后一個 <li> 后面插入了一個 <span>.</span>里面的內容是一個”.”，然后設置display:block; clear:both; height:0; 等屬性 (這個比喻不一定準確)。
我們看下在 Firefox 下面的效果：

可以看到 ul 已經自動伸長了，但下面有個小小的黑點。相信你已經猜到了，這個黑點對應的就是 content:”.” 。
這個黑點肯定是要去掉的啦，我們可以用 font-size:0;line-height:0; 將其去掉。
好了，現(xiàn)在在兩個陣營的瀏覽器里都實現(xiàn)目標了。以下是 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)在就來說說第二種方法。第二種方法還要更簡單一些。同樣，需要將瀏覽器分成兩個陣營。不過和上一個有所不同，這一次 IE7 站到了另外一個陣營。即 IE7, Firefox, Opera, Safari 等(這里暫時稱為A瀏覽器)。對于這些瀏覽器，只要定義一個 overflow:auto; 即可，但是對于 IE6 和 IE5 (稱為B瀏覽器)卻不起作用。不過要 IE6，IE5 聽話也很簡單。只要定義一個高度即可，哪怕是 0 ，也會自動伸長。知道這些還沒用，我們還得區(qū)分這兩個陣營的瀏覽器才行。怎么區(qū)分呢？
A 瀏覽器支持屬性選擇符，而B瀏覽器不支持。

所以以下代碼只有A瀏覽器才會執(zhí)行。

復制代碼
代碼如下:

[xmlns] ul { /* html[xmlns] ul 的簡寫 */
overflow:auto;
}

需要注意的是HTML 必須要有< !DOCTYPE >頭部以及<html>有xmlns屬性才會起作用。不過這個問題似乎不大，現(xiàn)在絕大部分網頁都有這兩個東東，包括 Dreamweaver 默認新建的網頁都會自動加上。

而對于B瀏覽器則可以通過以下方式：

復制代碼
代碼如下:

* html ul {
height:1%;
}

其實 height 完全可以寫成 0，為什么要寫1%呢？告訴你其實我也不知道，大家都這么寫。

好了，第二種方法的 ul 全部樣式代碼如下：

復制代碼
代碼如下:

ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul { /*html[xmlns] ul 的簡寫*/
overflow:auto;
}
* html ul {
height:1%;
}

現(xiàn)在既然有兩種方法，那么那一種更好呢？我個人比較喜歡第二種方法。原因很簡單，代碼更少，而且是符合標準的。只是在極少數(shù)情況下會出現(xiàn)滾動條，所以應該這兩種方法配合使用。

還有，這些代碼是可以通用的，可以提取為一個類比如 .clearfix 。這個任務就交給你自己完成吧。

相關文章

最新評論