眾所周知，CSS中的定位機制分為，文件流，浮動和絕對定位。(今天不談絕對定位)，如果對元素沒有進行任何定位處理的話，元素應該處於文件流中，當我們對元素進行了浮動(float)時，我們的元素就會脫離文件流，像一隻小船一樣漂流在文件之上。首先來看一下浮動會帶來哪些result.

第一：先看程式碼

效果：

result ：1、父盒子的margin受到影響，無法實現左右居中，

                2、我沒有給父盒子設定高度，浮動後父盒子的高度沒有被撐開，圖片中撐開的高度是padding帶來的效果。

接下來我們再進行一個有趣的操作，新增一個div塊類名為d，並且我們不對他進行浮動，這時候你會發現：

     div：d竟然跑到了div:a的下面。那麼此時我們就需要進行清除浮動了。

第二：清除浮動的方法

方法1、 在浮動元素的最後面新增一個新元素，應用clear:both.（clear:left是清除左浮動，clear:right是清除有浮動。為了方便，一般我們都是使用clear:both）

程式碼如下：

效果：

注：也可以直接在div:d上新增clear:both，效果一樣。

方法2、浮動元素的父元素使用overflow：auto；zoom是為了處理相容問題新增。

注意：使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以，其據說在於一個對seo比較友好，另一個hidden對seo不是太友好。

方法3、使用偽類：after，：before，同樣是對浮動元素的父元素新增，此方法也是我最喜歡的方法

 其中clear:both;指清除所有浮動；content: '.'; display:block;對於FF/chrome/opera/IE8不能缺少。