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，如需转载请自行联系原作者