什么是高度塌陷？
父元素高度自適應，子元素 float 后，造成父元素高度為0，稱為高度塌陷問題。
如何來解決高度塌陷？
方案一：給父元素一個固定的高度
缺點：給父元素固定高度違背了高度自適應的原則，不夠靈活，不推薦使用。
方案二：給父元素添加屬性 overflow: hidden;
優點：瀏覽器支持好，簡單；
缺點：當子元素有定位屬性時，設置 overflow: hidden; 容器以外的部分會被裁剪掉。
方案三：在子元素的末尾添加一個空的 div ，並設置下方樣式
優點：所有瀏覽器都支持，並且容器溢出不會被裁剪；
缺點：在頁面中添加無意義的div，容易造成代碼冗余。
方案四：萬能清除浮動法
在父元素中內容的最后添加一個偽元素來實現第三種方案的功能，具體設置樣式如下：
優點：不會造成代碼冗余，剩余代碼性能優化，推薦使用。
推薦前端博客：http://www.sharedblog.cn/?sort=5&page=5