什么是浮動呢？
定義這樣說：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 其實也就是把快級元素變成能和別的快級并排成一行。

浮動的的元素有4點特性：
1.浮動元素會脫離標準文檔流，已經不區分快和行了。

2.浮動的元素會互相貼靠。

3.浮動的元素有“字圍”的效果。

4.收縮。一個浮動的元素，如果沒有設置width，那么將自動收縮為文字的寬度。

同樣在前端攻城獅的道路，我們都是真誠盡心盡力的去學習進取。奈何先是各大瀏覽器廠商的大戰不斷，導致我們這群學習的人苦不堪言，一片水生火熱呀。不得不想進各種hack方法解決。（沒錯，這里就是吐槽的IE6！）

其次文檔標準流，在浮動之后也會挖下塌陷的大坑。初學者稍有不慎，塌陷的失控的子元素到處亂竄，弄的你雞飛狗跳苦不堪言。那么為了后面前端大道越行越遠，下面就跟大家講解一下清除浮動的4種套路。 

不過在講套路得時候，咱們順帶的也把浮動之后塌陷大坑給順便重現一樣。

浮動塌陷大坑：
先來看一個小小的demo：現在有兩個div，div身上沒有任何屬性。每個div中都有li，這些li都是浮動的先是html骨架部分  

下面的是css樣式：

看到這里，如果說沒有吃過浮動塌陷大虧的同學，肯定會以為這個網頁中效果是這個樣子

但是實際上瀏覽器最終的渲染的樣子：

第二個div中的li，去貼第一個div中最后一個li的邊了。

原因就是因為div沒有高度，不能給自己浮動的孩子們，一個容器。

所以第二個div中的li，去貼第一個div中最后一個li的邊了！

這種現象又稱作為浮動塌陷現象！

講完浮動塌陷之后，讓我開始回歸今天的正題。清除浮動塌陷的4種方法

方法1：給浮動的元素的上級添加高度

如果一個元素要浮動，那么它的祖先元素一定要有高度。高度的盒子，才能關住浮動。

只要浮動在一個有高度的盒子中，那么這個浮動就不會影響后面的浮動元素。所以就是清除浮動帶來的影響了。

所以只需要給li的上級ul或者div設置一個height：40px；（只要是浮動元素的上級元素就可以。），那么第二個div就好擠下來，在第一個盒子下面顯示出來。