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元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。