浮動，在HTML排版常常被使用的一個CSS屬性，很多網頁設計都會用到浮動，但並不是說浮動是網頁排版的必需品。由於浮動具有破壞性，很多時候採用浮動反而會造成適得其反的效果。在張大神的CSS三無準則中就有一條準則是“無浮動”，提倡整個網頁排版最好不需要用到浮動元素。每個人並非張大神，對於網頁的排版設計有自己的想法和方式，需不需要用到浮動都取決自己，不需要太過刻意去追求完全無浮動的佈局。

float的歷史

       道家有云：人法地，地法天，天法道，道法自然。一切事物追其本質，只有掌握其本質才能，才能更好的去理解它。對於浮動，我們也需要去了解它的歷史，才能更好的運用。
       在比較早的HTML文件中圖片和文字是相互分離的，文件呈現顯得極其難看，為了解決這個問題，就提出了float屬性幫助文字呈現，所有float最初的作用是——文字環繞

最初排版：

圖片使用float：left實現文字環繞：

float的特性

瞭解了float的原本的作用實現文字環繞後，需要了解它的特性：包裹性和破壞性

       包裹性，顧名思義就是將原本鬆散的、沒有規則的物體新增外層容器將其隔絕起來，包裹中的任何性質發生變動都不會對包裹外的事物造成影響。專業術語稱為：block formatting context——塊級格式化上下文，簡稱BFC。

       破壞性，對無高容器中子容器使用float的會造成父容器的高度塌陷，並且子容器位置會根據float的屬性值發生變動，由於float具有破壞性，所有很多人稱float為魔鬼。

float的破壞性帶來的父容器高度塌陷是不是bug

       很多人以為float的破壞性造成父容器高度塌陷是一個bug，然而並非如此，float使父容器高度塌陷是標準。可能有人會有疑問，怎麼會有規範引入新的問題，這個就得追溯到float的原本作用：僅僅是為了現實文字的環繞效果。當初的設計者在解決如何實現文字環繞效果的時候，採用了破壞這個特性。父容器無高度情況下高度是由子元素撐起來的，而為了實現文字環繞在子容器周圍，就必須先破壞父容器高度，才能讓文字環繞其中。

如何清除float帶來的影響

很多人都知道清除浮動這個說法，其實這個說法並不準確，應該稱為清除浮動帶來的影響

清除浮動的兩種方法：

方法一：HTML實現方法，腳底插入clear:both，在塌陷的父容器底部插入block水平元素

<div style="content:'';clear: both;"></div>

方法二：父元素BFC（IE8+）或haslayout（IE6/IE7），使用CSS在塌陷的父容器底部生成一個clear：both的after偽元素

.clearfix:after{content: '';display: block;height: 0;overflow: hidden;clear: both;}

這兩種方法都有不足之處，第一種在HTML中插入div元素，會讓人覺得多餘；第二種方法，after偽元素，對於IE6/IE7它們是陌生的。

可相容IE6/IE7的寫法

.clearfix:after{content: '';display: block;height: 0;overflow: hidden;clear: both;}
.clearfix{*zoom:1;}

對於偽元素還有一種更好的方法（相容性ok）：

.clearfix:after{content: '';display: table;clear: both;}
.clearfix{*zoom:1;}

什麼情況下需要使用.clearfix

       很多人會濫用.clearfix，在不需要的父容器上新增.clearfix，這個做法其實是多餘的。那麼，在什麼情況下需要使用.clearfix呢，clearfix應用在包含浮動子元素的父級元素上。濫用.clearfix並非是因為浪費，而是可能會讓IE6/IE7做出很多出格的事情，所以在使用.clearfix時請清楚它是作用在包含浮動子元素的父級元素上。