浮動元素使其父元素高度塌陷

• 我們經常會遇到一種情況，給一個元素設定浮動之後 float:left/right;，如果該元素的父元素有背景顏色，那麼會發現父元素的背景顏色消失了；如果父元素有一個邊框，那麼浮動元素無法將邊框撐開。
  

• 從以上兩張圖中可以看出新增浮動元素後，li元素按照規則橫向排列，但是父元素卻消失不見了。

  
  

• 為父元素新增一個5px的邊框，在li元素新增浮動後，邊框並沒有被內容撐開。

在第一個示例中彷彿父元素消失了，但在第二個示例中發現其實父元素並沒有消失，只是高度被計算為0。這就要回到浮動元素的特性來說明此問題“當元素設定浮動後，會自動脫離文件流”，翻譯成白話就是說，元素浮動後，就不在整個文件流的管轄範圍，那麼它之前存在在父元素內的高度就隨著浮動不復存在了，而此時父元素會預設自己裡面沒有任何內容（前提是未給父元素設定固定高度，如果父元素本身有固定高度，就不會出現這種情況）

解決方法：

1、給父元素也新增float。這樣讓父元素與子元素一起脫離文件流浮動起來，保證子元素在父元素內，這樣父元素就能自適應子元素的高度，但是此方法有一弊端，一定會影響父元素之後的元素排列，甚至影響佈局。
2、給父元素一個固定高度，此方法適用於子元素高度已知並且固定的情況。
3、新增一個塊級元素，並給此元素設定clear:both;清除浮動。在很早之前用的就是這種解決辦法，新建一個空的div，為這個div設定clear：both；這樣無疑是增加了無意義的標籤，一個大型頁面中，這種標籤太多是不好的。
4、給父元素新增 overflow：hidden；【後有詳解】
5、通過偽類::after清除浮動 【後有詳解】

overflow:hidden;

• 隱藏溢位，當內容超過其父元素時，可以使用該屬性和值將溢位的部分裁剪掉，使頁面更加美觀
• 清除浮動，當子元素浮動時，給父元素新增overflow：hidden，按照它的第一個特性，應該將子元素超出的部分截掉，但是因為子元素有浮動，無法裁剪，所有隻能由父元素增加高度去包裹住子元素，使得父元素擁有了高度，而這個高度是跟隨子元素自適應的高度，這樣就把浮動的子元素包含在父元素內了。

::after 偽類

• 利用偽類來清楚浮動，其效果跟建立一個空的div並設定其為clear：both；是一樣的，只不過這裡用偽類代替了空的div元素

<div
 
 class="box">
    <div class="son">我是浮動的子元素</div>
</div>

.box {
    width:400px;
    background:#F00;
}
.son {
    float:left;
}
.son::after {
    content:"";
    clear:both;/*清除浮動*/
    display:block;/*確保該元素是一個塊級元素*/
}