在css中clear的功能就是清除浮動這樣可以解決很多不相容的問題，下面我來詳細舉例說明一下關于clear清除浮動具體問題分析。
有這樣一種情形：在一個容器（container）中，有兩個浮動的子元素，如圖一。
（圖一 設計視圖是一個父容器中含有二個浮動的子元素）
請問HTML代碼應該怎麼寫？
很簡單啦，幾行字就夠了。
| 代碼如下 | 複制代碼 |
| <div> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> </div> |
上面的代碼完全正确，但是如果在浏覽器中一運作，就會出現意想不到的結果。
（圖二 實際視圖是子元素顯示在父容器的外部）
兩者好像脫離了關系一樣，怎麼會這樣？
2. 問題的原因
其實，原因很簡單，與浮動定位有關。
在CSS規範中，浮動定位不屬于正常的頁面流（page flow），是獨立定位的。是以，隻含有浮動元素的父容器，在顯示時不考慮子元素的位置，就當它們不存在一樣。這就造成了顯示出來，父容器好像空容器一樣。
3. 解決方法一：添加空元素
經典的解決方法，就是在浮動元素下方添加一個非浮動元素，就像圖三。
（圖三 在父容器底部添加一個非浮動元素）
代碼這樣寫：
| 代碼如下 | 複制代碼 |
| <div> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> <div style="clear:both;"></div> </div> |
這樣一來，就沒問題，能夠正常顯示了。原理是父容器現在必須考慮非浮動子元素的位置，而後者肯定出現在浮動元素下方，是以顯示出來，父容器就把所有子元素都包括進去了。
這種方法比較簡單，但是要在頁面中增加備援标簽，違背了語義網的原則。那麼，有沒有不修改HTML代碼的方法呢？
4. 解決方法二：浮動的父容器
另一種思路是，索性将父容器也改成浮動定位，這樣它就可以帶着子元素一起浮動了。
代碼這樣寫：
| 代碼如下 | 複制代碼 |
| <div style="float:left;"> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> </div> |
這種方法不用修改HTML代碼，但是缺點在于父容器變成浮動以後，會影響到後面元素的定位，而且有時候，父容器是定位死的，無法變成浮動。
5. 解決方法三：浮動元素的自動clearing
它的思路是讓父容器變得可以自動"清理"（clearing）子元素的浮動，進而能夠識别出浮動子元素的位置，不會出現顯示上的差錯。
要做到這點，隻要為父容器加上一條"overflow: hidden"的CSS語句就行了。代碼這樣寫：
| 代碼如下 | 複制代碼 |
| <div style="overflow: hidden;"> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> </div> |
這種方法的缺點主要有二個，一個是IE 6不支援，另一個是一旦子元素的大小超過父容器的大小，就會出顯示問題。
6. 解決方法四
還是回到方法一，能不能通過CSS語句添加子元素呢，這樣就不用修改HTML代碼了？
回答是可以的，我們知道CSS語句中有一個:after僞選擇符，就可以在父容器的尾部自動建立一個子元素，這正好符合我們的需要。
下面的代碼參照了lifesinger的寫法：
| 代碼如下 | 複制代碼 |
| .clearfix:after { content: "020"; display: block; height: 0; clear: both; } |
其中的"clearfix"是父容器的class名稱，"content:"020";"是在父容器的結尾處放一個空白字元，"height: 0;"是讓這個這個空白字元不顯示出來，"display: block; clear: both;"是確定這個空白字元是非浮動的獨立區塊。
但是，:after選擇符IE 6不支援，也就是說上面的這段代碼在IE 6中無效，這怎麼辦？
我們添加一條IE 6的獨有指令"zoom:1;"就行了，這條指令的作用是激活父元素的"hasLayout"屬性，讓父元素擁有自己的布局。（它的具體含義，請參見本文的附錄。）IE 6會讀取這條指令，其他浏覽器則會直接忽略它。
7. 最後的生産代碼
| 代碼如下 | 複制代碼 |
| .clearfix:after { content: "020"; display: block; height: 0; clear: both; } .clearfix { zoom: 1; } |
更新 2011.04.21
Nicolas Gallagher貼出了更通用的生産代碼。
| 代碼如下 | 複制代碼 |
| .cf:before, .cf:after { content:""; display:block; } .cf:after { clear:both; } .cf { zoom:1; } |
[參考閱讀]
* PPK: Clearing floats
* How To Clear Floats Without Structural Markup
* mezzoblue: Clearance
====================
附錄 什麼是hasLayout
（以下内容摘自CSS Mastery一書的中譯本《精通CSS 進階Web标準解決方案》第154頁，人民郵電出版社，2007）
IE使用Layout概念來控制元素的尺寸和位置。如果一個元素有Layout，它就有自身的尺寸和位置；如果沒有，它的尺寸和位置由最近的擁有布局的祖先元素控制。
在預設情況下，擁有Layout的元素包括：
| 代碼如下 | 複制代碼 |
| <html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <button>, <select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee> |
（注意，<p>和<div>預設不擁有Layout。）
clear用法
clear屬性值有四個clear:both|left|right|none;
作用：該屬性的值指出了不允許有浮動對象的邊。
這個屬性是用來控制float屬性在文檔流的實體位置的。
當屬性設定float（浮動）時，他所在的實體位置已經脫離文檔流了，但是大多時候我們希望文檔流能識别float（浮動）,或者是希望float（浮動）後面的元素不被float（浮動）所影響，這個時候我們就需要用clear:both;來清除。
clear:left;表示該元素左邊不存在浮動元素；
clear:right;表示該元素右邊不存在浮動元素；
clear:both;表示該元素兩邊都不存浮動元素；
clear:none表示兩邊允許有浮動元素。