很多時候子元素的浮動，會造成父元素高度塌陷
解決方法：
1.給父元素末尾添加一個空元素，並設置成清除浮動，即：
<div style="clear:both;"></div>
優點：通俗易懂，易於掌握
缺點：添加了無意義標簽，不易於后期維護，違背了結構和表現分離的標准
2.給父元素添加 overflow：auto;
3.讓父元素也浮動
缺點：影響整體頁面布局，若父元素也有父元素呢？總不能一直浮動到body吧？
4.使用after偽元素
給父元素添加一個類，來添加一個看不見的塊元素，以實現清除浮動。
.clearfix:after
{
content:".";
dispaly:block;
height:0;
clear:both;
visibility:hidden;
}
優點：這個方法和第一種方法有點類似，但實際沒有在頁面上添加無意義標簽，是頁面結構更完整。
5.最優解
首先我們說一個CSS的概念——BFC塊級格式上下文，簡單來說就是只要樣式或方法觸發了BFC就可以防止高度塌陷.
以下就是可以觸發BFC的部分樣式
flaot: left | right;
overflow: auto | hidden | scorll;
dispaly: table-cell | table-caption | inline-block;
position: fixed | absolute;
前面幾個方法也是借助了這個原理，但都有些缺陷。下面我們來介紹一個比較優雅的方法來實現。
.clearfix:after,
.clearfix:before
{
content: " ";
display:table;
}
.clearfix:after
{
clear:both;
}
table屬性可以創建一個匿名的表格單元，也會觸發BFC。
加入before對於清除浮動沒有影響，主要是為了解決瀏覽器頂部空白崩潰的問題。
例如：現有上下兩個盒子，上盒子設置了margin-bottom：10px，下盒子設置了margin-top：10px。
按理說兩個盒子的上下距離應該是20px，但實際上只有10px，兩個盒子的外邊距會發生一個疊加。
觸發BFC即可解決這一問題。
----------------------------------------分割線（2017-9-21 更新）-------------------------------------
W3C是這樣定義BFC的：
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的塊級格式化上下文。
在一個塊級格式化上下文里，盒子從包含塊的頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。兩個相鄰的塊級盒子的垂直外邊距會發生疊加。
在塊級格式化上下文中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣），即使存在浮動也是如此，除非這個盒子創建一個新的塊級格式化上下文。(谷歌翻譯)
BFC有一下特性：
- 內部的Box會在垂直方向，從頂部開始一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box疊加。
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然。
- 計算BFC的高度時，浮動元素也參與計算。
-----------------------------------------------------------------------------------------------------------------------------
現在我們只需在每個浮動的元素添加一個 clearfix類就可以解決高度塌陷的問題 是不是很簡單呢？
以上是筆者的一些見解，有不當之處，歡迎指正~