div中ul高度自增解决办法

div中ul高度自增解决办法

处理前：

 

处理后：

处理代码：

 

1. <style>  
2. ul{ 
3.     border:1px solid red; 
4.     width:300px; 
5.     height:auto; 
6. }  
7. li{ 
8.     border:1px solid #00f; 
9.     width:100px; 
10.     height:30px; 
11.     float:left; 
12. }  
13. </style>  
14.  
15. <ul>  
16.     <li>1</li>  
17.     <li>2</li>  
18.     <li>3</li>  
19.     <li>4</li>  
20. </ul>  
21. <div style="clear:both;visibility:hidden"></div> 
22. <div style="border:1px solid #360"> 
23.  div中ul高度自增 div中ul高度自增 div中ul高度自增 div中ul高度自增 div中ul高度自增 
24. </div> 

 

重点是这句（加在ul后面即可）：

<div style="clear:both;visibility:hidden"></div>

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