當一個元素內只包含浮動元素的時候，它會出現高度摺疊，即元素的上下底邊重合，即出現高度為0的情況，這樣會導致後面接著的內容與上面內容出現重疊現象，針對這個問題分享幾種解決方法：

1、直接給父元素設定height

ul {
    list-style-type: none;
    height: 30px; /*新增高度屬性*/
}

2、父元素設定overflow屬性值–auto|hidden

ul {
    list-style-type: none;
    overflow: hidden; /*新增高度屬性*/
}

3、子元素中新增一個同級空div,設定clear:both

<ul
 
>
<li>標籤1</li>
<li>標籤2</li>
<li>標籤3</li>
<div style="clear:both;"></div> <!--新新增的空div，它和浮動元素同一級別，且位於最後-->
</ul>

4.父元素新增zoom屬性，適用於IE

IE支援一個CSS屬性zoom，當定義了這個屬性之後在 IE 瀏覽器裡面就會自動適應高度了。設定為zoom:1，程式碼如下：

ul {
    list-style:none;
    zoom:1; /* 適用於IE */
 

}

5.利用偽元素:after
用這種方法時要為包含元素先新增一個類名，這裡為ul標籤設定的類名.clearUl

<ul class = "clearUl"> <!--為包含的外圍元素設定類-->   
<li><img src = "1.jpg" /></li>   
<li><img src = "2.jpg" /></li>   
<li><img src = "3.jpg" /></li>   
<li><img src = "4.jpg
 
" /></li>   
<li><img src = "5.jpg" /></li>   
<li><img src = "6.jpg" /></li>   
</ul>   

ul {   
list-style-type: none;   
width: 800px;   
background: blue;   
}   
li {   
float: left;   
}   
/*利用:after偽元素*/   
.clearUl:after {   
content:"";   
display: block;   
clear: both;   
}  

在:after為元素裡面用到了content屬性，這樣這條樣式的意思是在ul元素後面生成指定的內容，這裡生成的內容是一個空字串，因為只是讓它來消除ul標籤的高度摺疊，並不讓它顯示出來。還有，這條樣式裡有display屬性，要將他設定成block，這樣clear屬性才會起作用，因為清除操作只作用於塊級元素，它的原理是為要執行清除操作的元素新增上邊距，以此讓元素降到浮動元素的下面，而操作行內元素的上邊距不起作用

利用偽元素清除浮動的寫法

.clearfix:before,
.clearfix:after{
    content:"";
    display:table
    }

.clearfix:after{
    clear:both
    }

.clear{
    display:block;
    overflow:hidden;
    visibility:hidden;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
    clear:both
}