在使用CSS的時候，當父元素不設定高度，子元素就會撐大父元素的高度。這時給子元素新增浮動或絕對定位的話，父元素就會出現高度塌陷問題，如下圖：（紅色為父盒子邊框，藍色為子盒子，綠色為背景）

當出現高度塌陷的問題時，子元素脫離了文件流，容易造成頁面佈局出現問題。

解決方法：

1.給父元素設定固定高度。

　　缺點：無法讓元素高度自適應。

2.利用BFC的顯示原則，給父元素新增overflow:hidden的屬性。

　　優點：能實現元素高度自適應；並解決高度塌陷問題；

　　缺點：可能導致子元素顯示不全，被隱蔽

3.浮動元素可以給父元素新增清除浮動的屬性。

　　缺點：增加程式碼負擔，產生程式碼冗餘；

.clear_fix{
    clear:both;
    height:
 
0;
    float:left;
}

4.給父元素新增display:table元素，使其轉換成表格特性；

　　缺點：會改變當前元素型別

5.使用after給父元素新增一個偽元素(推薦)

.clear_fix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}