先看一個例子：
html:
111cn.net代碼如下:
<ul>
<li></li>
<li></li>
</ul>
css:
111cn.net代碼如下:
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 即藍色的地區高度為0，如果沒有設定 padding，這個 ul 是看不到的。當然要讓它伸長也很簡單，只需要在最後一個 li 後面加一個標籤清楚下浮動就可以了。不過這樣的話就改變了html結構，不好。現在這裡要討論的就是如何在不改變結構的情況下讓 ul 自動伸長。
注意：自動伸長針對的是包含浮動元素的元素(這裡是 ul)。而不是浮動元素自身(li)。
第一種方法：
ie 支援一個 css 屬性 zoom， 這個元素接受一個數字或一個百分數，表示這個元素放大（縮小）的比例。例如：zoom:0.5或zoom:50% 表示縮小一半，而zoom:2或zoom:200%則表示放大一倍。
當定義了這個屬性之後在 ie 瀏覽器裡面就會自動適應高度了。當應用了這個屬性之後，ie 就會自動伸長了。一般情況下我們不需要放大或縮小，所以定義 zoom:1 就行了。現在的 css：
111cn.net代碼如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1; /* ie */
}
而非 ie 瀏覽器不支援這個屬性。所以第一種方法需把瀏覽器分為兩個陣營：ie 和 非ie。
對於非 ie 瀏覽器需要用到一個偽類 :after (ie 瀏覽器不支援)。css 代碼如下：
111cn.net代碼如下:
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; 將其去掉。
好了，現在在兩個陣營的瀏覽器裡都實現目標了。以下是 ul 所有的css代碼：
111cn.net代碼如下:
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;
}
第二種方法
我剛說過不止一種方法可以解決，那現在就來說說第二種方法。第二種方法還要更簡單一些。同樣，需要將瀏覽器分成兩個陣營。不過和上一個有所不同，這一次 ie7 站到了另外一個陣營。即 ie7, firefox, opera, safari 等(這裡暫時稱為a瀏覽器)。對於這些瀏覽器，只要定義一個 overflow:auto; 即可，但是對於 ie6 和 ie5 (稱為b瀏覽器)卻不起作用。不過要 ie6，ie5 聽話也很簡單。只要定義一個高度即可，哪怕是 0 ，也會自動伸長。知道這些還沒用，我們還得區分這兩個陣營的瀏覽器才行。怎麼區分呢？
a 瀏覽器支援屬性選擇符，而b瀏覽器不支援。
所以以下代碼只有a瀏覽器才會執行。
111cn.net代碼如下:
[xmlns] ul { /* html[xmlns] ul 的簡寫 */
overflow:auto;
}
需要注意的是html 必須要有< !doctype >頭部以及<html>有xmlns屬性才會起作用。不過這個問題似乎不大，現在絕大部分網頁都有這兩個東東，包括 dreamweaver 預設建立的網頁都會自動加上。
而對於b瀏覽器則可以通過以下方式：
111cn.net代碼如下:
* html ul {
height:1%;
}
其實 height 完全可以寫成 0，為什麼要寫1%呢？告訴你其實我也不知道，大家都這麼寫。
好了，第二種方法的 ul 全部樣式代碼如下：
111cn.net代碼如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul { /*html[xmlns] ul 的簡寫*/
overflow:auto;
}
* html ul {
height:1%;
}
現在既然有兩種方法，那麼那一種更好呢？我個人比較喜歡第二種方法。原因很簡單，代碼更少，而且是符合標準的。只是在極少數情況下會出現捲軸，所以應該這兩種方法配合使用。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
