我們先來回憶一下float的特徵：
1）塊在一排顯示
2）內聯支援寬高
3）預設內容撐開寬度
4）脫離文件流
5）提公升層級半層
由於float浮動脫離文件流，那麼就很容易產生各種相容性和由於浮動產生的視覺效果上的差別。接下來我們分析幾種主要的解決方法。大家最熟悉的方法應該就是新增空標籤，然後利用clear來清除浮動，其實方法很多，但是不是每種都適合我們所遇到的情況，也不是每種都能很好的相容所有瀏覽器，所以需要選擇適當的方法去解決這個由於浮動所產生的問題。
一、下面幾個是計較傳統的幾種清浮動的方法，但是在目前的使用中還是有些問題
1、加高度 (擴充套件性不好)
如果是通過加高度進行清浮動的話，那麼就意味著在設計的過程中，高度是固定的，這樣就無法自適應那些需要自適應高度的情況，擴充套件性不好。
比如：
2、給父級加浮動 (頁面中所有元素都加浮動，margin左右自動失效（floats bad ！）)
3 、.inline-block 清浮動方法 (margin左右auto失效)
4、空標籤清除浮動 (ie6 最小高度 19px；（解決後ie6下還有2px偏差）)
5、.br清浮動(不符合工作中：結構、樣式、行為，三者分離的要求)
即新增下面這條語句在裡面的div後面：
二、目前常用的三種清浮動方法，也是比較有效的方法
先拋一塊問題磚（display： block）：
3我們本意是想讓三個div靠左顯示，並且是在第乙個div中，但是現在的效果是邊框沒有被撐開，margin值不能正常顯示。所以可以採用以下幾種方法進行解決。
1、新增新的元素 、應用 clear：both；
html：
123
.clear.box3、據說是現在主流的方法 :after 方法：（注意：作用於浮動元素的父親）
原理：這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似於clear:both方法，只是區別在於:clear在html插入乙個div.clear標籤，而box利用其偽類clear:after在元素內部增加乙個類似於div.clear的效果。
html:
123
.clearfix
.clearfix:after
:after ie6，7下不相容
2）zoom 縮放
a、觸發 ie下 haslayout，使元素根據自身內容計算寬高。
b、ff 不支援；
其中clear:both;指清除所有浮動；content: '.'; display:block;對於ff/chrome/opera/ie8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清楚浮動。
最終的效果圖：
HTML5開發系列（9） 之 CSS高階技巧
1.1 cursor default 預設的滑鼠樣式 1.2 cursor pointer 小手的樣子 1.3 cursor text 勾選文字的樣式 1.4 cursor move 拖動的樣式 比如input預設有一臉色的輪廓線 和border 邊框 很像 一般情況下都是去掉這種樣式的 input...
HTML5學習之 HTML 5 拖放
拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性，即抓取物件以後拖到另乙個位置。在 html5 中，拖放是標準的一部分，任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...
HTML5 高階系列 web Storage
html5 的 web storage 儲存方式有兩種 localstorage 和 sessionstorage。這兩種方式都是通過鍵值對儲存資料，訪問方便，不影響 效能。他們的用法相同，儲存時間不同。localstorage 的資料儲存在本地硬體上，可以永久儲存，可以手動呼叫api清除資料。se...