全方位清理浮動

清除浮動一個凡是做頁面的人都會遇到的一個東西，但是是否大家都能夠清楚的知道，全方位的瞭解呢？於是一閒下來了馬上寫了這樣的一篇文章，不能講面面俱到，然而基本能將我所知道的傾囊相授了。

我們粗略的一起來看看清除浮動的辦法一共有多少個(IE裡面用zoom:1就不寫了，下一個專題再寫)。對應的 DEMO

1、採用偽類:after進行後續空制的高度位零的偽類層清除
2、採用CSS overflow:auto的方式撐高
3、採用CSS overflow:hidden的方式產生怪異適應
4、採用display:table將對像變成table形式
5、採用div標籤，以及css的clear屬性
6、採用br標籤，以及css的clear屬性
7、採用br標籤，以及其自身HTML的clear屬性

粗略的看，他們都能將問題解決；然而他們另外一方面又有著各自的利弊。（一一對應）

1、優點：結構語義化完全正確，不會產生其餘的怪異問題。
缺點：復用方式不當容易造成代碼量急劇增大。
建議：最外層輕浮動時使用，或清晰模塊化復用方式的人使用。

2、優點：結構語義化完全正確，代碼量極少。
缺點：多個嵌套後，點擊最外層的輕浮動框會遭成最外層至最內層內容全選（FF）；或者在mouseover造成寬度改變時會出現最外層模塊有滾動條（IE）。
建議：內個模塊使用，請勿嵌套。

3、優點：結構語義化完全正確，代碼量極少。
缺點：內容增多時候極易不會自動換行而內容被隱藏掉。
建議：寬度固定時使用，請勿嵌套。

4、優點：結構語義化完全正確，代碼量極少。
缺點：盒模型屬性已經改變，可想而知奇異事件自然多得你數都數不到。
建議：如果你不想改Bug改死你的話，最好不要使用；不過可以作為alpha版本當中臨時性的忽悠下測試。

5、優點：代碼量極少，復用性極高。
缺點：完全不能完美的適應語義化，不利於改版以及需求變更。
建議：初學者使用，可以讓你快速的解決浮動問題。

6、優點：語義化程度比第5種情況要更優；代碼量極少，復用性極高。
缺點：語義化依舊不完美，不利於改版以及需求變更。
建議：初學者使用，可以讓你快速的解決浮動問題。

7、優點：語義化程度比第5、6種情況要更優；代碼量最少，復用性極高。
缺點：語義化依舊不完美，不利於改版以及需求變更。
建議：引導初學者思維升級時使用，讓其明白與其用classname來控制一種表現，倒不如回歸到WEB1.0的時代的網頁直接用html屬性來控制表現，畢竟後者的代碼量更少。

原文：需要看這裡...
這裡提供一個方法，還算不錯：

程序代碼
/* CSS Hack
------------------------------------------------- */
#globalNav:after {
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#globalNav { display:inline-block;}
/* Hide form IE-mac \*/
*html #globalNav { height:1%;}
#globalNav { display:block;}
/* End hide form IE-mac*/

個人認為最不好的地方在，連最新的Dreamweaver CS4在視覺編輯上也會錯亂，看來DW也不認得這些東西...

文章來自BASYTARS DESIGN網頁設計公司