li浮動時ul高度為0，解決ul自適應高度的幾種方法

在網頁設計中，常常需要對li標籤做浮動效果，但是在不同瀏覽器中會遇到相容性問題，比如IE中會出現ul高度為0的情況，是效果不能達

到預期效果。那麼這裡我就來講解一下解決這個問題的幾種方法。

1.給ul元素設定高度height
最直接的辦法是給ul元素設定一個高度，即ul標籤新增height屬性，程式碼如下:

ul {
    list-style-type: none;
    height: 30px; /*新增高度屬性*/
}

次方法有個缺點：就是元素的高度不能自適應內容。

2.新增一個空的div
新增一個空的div，這個div和浮動元素同一級別，且位於浮動元素的最後。這個方法必須要為這個div新增一個clear:both屬性，程式碼如下：

<ul>
<li>標籤1</li>
<li>標籤2</li>
<li>標籤3</li>
<div style=”clear:both;”></div> <!–新新增的空div，它和浮動元素同一級別，且位於最後–>
</ul>

3.新增zoom屬性，適用於IE

IE支援一個CSS屬性zoom，當定義了這個屬性之後在 IE 瀏覽器裡面就會自動適應高度了。設定為zoom:1，程式碼如下：

ul {
    list-style:none;
    zoom:1; /* 適用於IE */
}

通過這幾種方法基本可以解決元素的高度不能自適應內容。