div中ul高度自增解決辦法

div中ul高度自增解決辦法

處理前：

 

處理後：

處理代碼：

 

<style>
ul{
    border:1px solid red;
    width:300px;
    height:auto;
}
li{
    border:1px solid #00f;
    width:100px;
    height:30px;
    float:left;
}
</style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<div style="clear:both;visibility:hidden"></div>
<div style="border:1px solid #360">
 div中ul高度自增 div中ul高度自增 div中ul高度自增 div中ul高度自增 div中ul高度自增
</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元素（對象）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。