原本頁面流布局顯示如上圖所示，運用了float屬性後就顯示為如下圖所示，這就是浮動的設計初衷
float的一些特性：包裹性、破壞性。
包裹的特性其實主要有三個表現：收縮、堅挺、隔絕。
float破壞性主要表現在使父容器塌陷（浮動使得父容器塌陷是标準而非bug，否則如果不讓父視窗塌陷怎麼實作文字環境效果）
浮動的破壞性隻是單純的為了實作文字環繞效果
BFC（block format context）塊級格式化上下文
也就是說有兩種方法來解決，那麼這兩種方法實作的差異在哪？
clear方式的具體實作？
但是上述方法會有如下圖所示不足
BFC/hasLayout具體實作方式？
其實還有更好的方式
其實.clearfix的樣式隻應用在包含浮動子元素的父級元素上。
如果放到不包含浮動子元素的父級元素上那就是濫用。如果亂用hasLayout往往會讓IE6/IE7做出出格的事情，因為浮動會觸發hasLayout，是以濫用浮動會發生很多怪異現象。
打句廣告：在html中一般會用nbsp;來表示空格，事實上nbsp原來是如下圖所示的意思
用demo先來說說第2個特性吧，html代碼如下所示：
View Code
從上述代碼運作效果圖可知原先為display:inline-block的元素由于增加了float:left則變成display:block
再說說浮動去空格吧
示例代碼如下：
運作效果圖如下
原先按鈕之間是有空格的，點選下面增加浮動按鈕後，原先按鈕就沒有任何空格了，事實上并非空格去掉了，隻是空格移動父容器所有浮動元素最後
最簡單的應用莫過于
有兩種方法
1、左邊元素使用width+float，右邊元素使用padding-left或者margin-left
2、左邊元素使用width+float，右邊元素也使用width+float不過這次是用right值
如下所示
核心代碼如下所示：
一個一個來說（我說的是在IE7及以下浏覽器）
html代碼如下所示：
實作效果圖如下：
當我們改變視窗大小時，效果圖如下
html代碼
也就是說當超過3個浮動元素時，浮動元素倒數第2個元素則會在ie7及以下浏覽器出現垂直間距問題，顯示如下圖所示
在ie7及以及顯示效果圖卻出現如下所示讓人哭笑不得的場景（居然多了一個C）
出現如下所示效果圖(是不是會很無語)
不用使用浮動去做一些堆磚頭的布局，使用流體布局相關的方法就可以避免怪異問題，總之就是不要濫用浮動