一、前面的一些YY
首先，不知道您注意到沒有，標題“清除浮動”加了個引號。我最近在想，這個所謂的“清除浮動”的是否準確。人有從眾的心理，尤其在我們這個集體主義文化的社會，從眾並不是一個消極的標籤，在亞洲集體主義文化裡（例如日本），其象徵著忍耐，自我控制，以及成熟，但是，有時會延續一些不準確的觀點，還記得小學“兩個鐵球同時落地”的故事嗎。
我這裡要說一些個人的，很情感化的東西，非常歡迎反駁。我在國外的技術上也經常見到”clear float”一詞，翻譯過來就是“清除浮動”，我入行較淺，所以我只能臆想，是不是“清除浮動”確實表示了那個意思，於是就廣泛使用，越是使用廣泛越不容易發現其中的不嚴謹之處。
我最近思考“清除浮動”的一些東西，發現，“清除浮動”這個說法越想越覺得不準確。準確的說法應該是“清除浮動造成的影響”，真正的“清除浮動”是什麼呢，float:none;這才是“清除浮動”的字面意思。當然，也有可能是“清除浮動”就是個簡稱，意思就是“清除浮動造成的影響”，只是叫了順口，大家也都這麼稱呼了，大家其實都心知肚明。希望自己是想多了。
YY結束，進入本文正題，一些思考性的內容，講講我對overflow與zoom可以清除浮動造成影響的原因的理解，都是些淺薄的認識，希望真正理解的人能夠指點糾正，大大歡迎反駁，發表您自己的觀點。
二、元素的包裹性
“包裹”這個名詞常出現在JavaScript中，尤其jQuery之類的js庫，很形象的一個詞。昨天我看到這麼句很有啟發性的話：“視覺化思考能以獨特而有效方式，讓你的心有更大的空間來解決問題。”啟發性在於，這裡的“視覺化思考”改為其他一些名詞，例如“情感化思考”，“形象化思考”等同樣受用。也就是在思考問題的時候融入一些很主觀的非邏輯性的思考有助於有更廣闊的空間來解決問題。
一提到“包裹”一詞，我想到了就是白細胞吞噬細菌（形象化思考 – 聯想），以及溫暖及安心（情感化思考）。這因人遺傳、成長等因素相關。為什麼我要講這些看似無關主題的東西，因為下面我要將的很多東西就是自己的感覺，“我覺得它就是這個樣子的”，很多主觀的東西。
（1）下面我們來看下zoom在非IE瀏覽器中的作用：看下面的例子，我是在Google瀏覽器下訪問的，在該例子中zoom的作用是放大為原來的2倍（讀者可以自己嘗試縮小操作）
1.zoom:1 時
<!DOCTYPE html><html><head><meta charset="utf-8" /><style>p{width: 100px;height: 100px;border: 3px solid red; zoom: 1;}</style></head><body><p>hello</p></body><html>
以上代碼的結果
2.zoom：2 即放大為原來的2倍：
<!DOCTYPE html><html><head><meta charset="utf-8" /><style>p{width: 100px;height: 100px;border: 3px solid red; zoom: 1;}</style></head><body><p>hello</p></body><html>
注意：zoom在非IE瀏覽器中表現為支援放大或者縮小，但是由於這個屬性是一個不標準的css屬性，因此一般在非IE瀏覽器中不用zoom來實現p 的縮放效果，現在要放大或者縮小直接用css3的transform屬性。
（2）看完了zoom在非IE瀏覽器中的表現之後，我們就該看看這個屬性在IE瀏覽器中的作用了。
Zoom的使用方法：
zoom : normal | number
normal : 預設值。使用對象的實際尺寸
number : 百分數 | 無符號浮點實數。浮點實數值為1.0或百分數為100%時相當於此屬性的 normal 值用白話講解就是zoom:後面的數字即放大的倍數，可以是數值，也可以是百分比。如：zoom:1，zoom:120%。而這個屬性只要在IE中才起作用，所以很少用到它的實際用途，而最經常用到作用是清除浮動等，如：
.border{
border:1px solid #CCC;
padding:2px;
overflow:hidden;
_zoom:1;
}
_zoom是CSS hack中專對IE6起作用的部分。IE6瀏覽器會執行zoom:1表示對象的縮放比例，但這裡
overflow:hidden;和_zoom:1;是連起來用的，作用是清除border內部浮動。
同理，還可以使用同樣方法清除margin屬性在IE瀏覽器中的重疊問題：這就要提到zoom屬性在IE中的第二個作用了，即
相容IE6、IE7、IE8瀏覽器，經常會遇到一些問題，可以使用zoom:1來解決，有如下作用：
(2)觸發IE瀏覽器的haslayout ,解決ie下的浮動，margin重疊等一些問題。
比如，本站使用p做一行兩列顯示，HTML代碼：
<p class="h_mainbox"> <h2>推薦文章</h2> <ul class="mainlist"> <li><a href="#" style="color:#0000FF" target="_blank">CSS庫吧</a></li> <li><a href="#" style="color:#0000FF" target="_blank">原創< /a></li> </ul> </p>
CSS代碼：
.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden} .h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;} .h_mainbox h2 span { float:right; font-weight:normal;} .h_mainbox ul { padding:6px 0px; background:#fff;} .mainlist { overflow:auto; zoom:1;} .h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}
.mainlist裡面的zoom:1的那裡就可以在IE6、IE7、IE8正常顯示效果了。
(3)下面是zoom屬性在IE瀏覽器中常見作用總結，希望對今後在使用這個屬性時有所協助：
1、檢查頁面的標籤是否閉合
不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 問題，卻僅僅源於這裡。畢竟頁面的模板一般都是由開發來嵌套的，而他們很容易犯此類問題。
快捷提示：可以用 Dreamweaver 開啟檔案檢查，一般沒有閉合的標籤，會黃色背景高亮。
2、樣式排除法
有些複雜的頁面也許載入了 N 個外鏈 CSS 檔案，那麼逐個刪除 CSS 檔案，找到 BUG 觸發的具體 CSS 檔案，縮小鎖定的範圍。
對於剛才鎖定的問題 CSS 樣式檔案，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。
3、模組確認法
有時候我們也可以從頁面的 HTML 元素出發。刪除頁面中不同的 HTML 模組，尋找到觸發問題的 HTML 模組。
4、檢查是否清除浮動
其實有不少的 CSS BUG 問題是因為沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的，推薦使用 無額外 HTML 標籤的清除浮動的方法（盡量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動，會有太多的限制性）。
5、檢查 IE 下是否觸發 haslayout
很多的 IE 下複雜 CSS BUG 都與 IE 特有的 haslayout 息息相關。熟悉和理解 haslayout 對於處理複雜的 CSS BUG 會事半功倍。推薦閱讀 old9 翻譯的 《On having layout》（如果無法翻越穿越偉大的 GFW，可閱讀 藍色上的轉帖 ）
快捷提示：如果觸發了 haslayout，IE 的調試工具 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值為 -1。
6、邊框背景調試法
故名思議就是給元素設定顯眼的邊框或者背景（一般黑色或紅色），進行調試。此方法是最常用的調試 CSS BUG 的方法之一，對於複雜 BUG 依舊適用。經濟實惠還環保^^
最後想強調一點的是，養成良好的書寫習慣，減少額外標籤，盡量語義，符合標準，其實可以為我們減少很多額外的複雜 CSS BUG，更多的時候其實是我們自己給自己製造了麻煩。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
