div中ul高度自增解決辦法

div中ul高度自增解決辦法

處理前：

<a href="http://blog.51cto.com/attachment/201304/172003374.jpg" target="_blank"></a>

處理後：

<a href="http://blog.51cto.com/attachment/201304/172018861.jpg" target="_blank"></a>

處理代碼：

&lt;style&gt;  

ul{ 

    border:1px solid red; 

    width:300px; 

    height:auto; 

}  

li{ 

    border:1px solid #00f; 

    width:100px; 

    height:30px; 

    float:left; 

&lt;/style&gt;  

&lt;ul&gt;  

    &lt;li&gt;1&lt;/li&gt;  

    &lt;li&gt;2&lt;/li&gt;  

    &lt;li&gt;3&lt;/li&gt;  

    &lt;li&gt;4&lt;/li&gt;  

&lt;/ul&gt;  

&lt;div style="clear:both;visibility:hidden"&gt;&lt;/div&gt; 

&lt;div style="border:1px solid #360"&gt; 

 div中ul高度自增 div中ul高度自增 div中ul高度自增 div中ul高度自增 div中ul高度自增 

&lt;/div&gt; 

重點是這句（加在ul後面即可）：

&lt;div style="clear:both;visibility:hidden"&gt;&lt;/div&gt;

clear:both 規定在左右兩側均不允許出現浮動元素。

這個屬性是用來控制float屬性在文檔流的實體位置的。當屬性設定float（浮動）時，其所在的實體位置已經脫離文檔流了，但是大多時候我們希望文檔流能識别float（浮動），或者是希望float（浮動）後面的元素不被float（浮動）所影響，這個時候我們就需要用clear:both;來清除。

visibility:hidden 規定元素是否可見

display:none 和 visibility:hidden的差別：

display:none：使用該屬性後，HTML元素（對象）的寬度、高度等各種屬性值都将“丢失”;

visibility:hidden：使用該屬性後，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。

      本文轉自許琴 51CTO部落格，原文連結：http://blog.51cto.com/xuqin/1168686，如需轉載請自行聯系原作者