什麼是高度塌陷？

父元素高度自適應，子元素 float 後，造成父元素高度為0，稱為高度塌陷問題。

如何來解決高度塌陷？

方案一：給父元素一個固定的高度

缺點：給父元素固定高度違背了高度自適應的原則，不夠靈活，不推薦使用。

方案二：給父元素新增屬性 overflow: hidden;

優點：瀏覽器支援好，簡單；

缺點：當子元素有定位屬性時，設定 overflow: hidden; 容器以外的部分會被裁剪掉。

方案三：在子元素的末尾新增一個空的 div ，並設定下方樣式

div{
    clear: both;
    height: 0;
    overflow: hidden;
}

優點：所有瀏覽器都支援，並且容器溢位不會被裁剪；

缺點：在頁面中新增無意義的div，容易造成程式碼冗餘。

方案四：萬能清除浮動法

在父元素中內容的最後新增一個偽元素來實現第三種方案的功能，具體設定樣式如下：

父元素:after{
    content: "";
    height: 0;
    clear: both;
    overflow: hidden;
    display: block;
    visibility: hidden;
}

優點：不會造成程式碼冗餘，剩餘程式碼效能優化，推薦使用。