[轉]清理浮動的全家

標籤：

原文地址：http://www.jb51.net/css/67471.html

原文地址：http://www.twinsenliang.net/skill/20090413.html

說到清除浮動，最直接的反應是clear:both這個css屬性，還在為為啥不用這個屬性而疑惑，至於清除浮動後面的原理，一直處於懵懂的狀態，終於下定決心去瞭解一下~查查資料，再自己去驗證~~然後就開始了

1、概念的區分：

　　1）清除浮動：清除對應的單詞是 clear，對應CSS中的屬性是 clear：left | right | both | none； 
　　2）閉合浮動：更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。

　　我們想要達到的效果更確切地說是閉合浮動，而不是單純的清除浮動，在父元素上設定clear：both清除浮動並不能解決高度塌陷的問題。 

2、為何要清除浮動：

　　css中的定位機制：普通流，浮動，絕對位置 （其中"position:fixed" 是 "position:absolute" 的一個子類）

　　子項目浮動漂浮於普通流之上，像浮雲一樣，但只能左右浮動，父元素內不存在其他普通流元素，就會表現為高度為0

　　清除浮動的方法：

　　　　

我們粗略的一起來看看清除浮動的辦法一共有多少個(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屬性來控製表現，畢竟後者的代碼量更少。

 

最佳清除浮動方法：

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } 
.clearfix { *zoom:1; } 

 

：before虛擬元素是用來處理margin邊距重疊的

 

[轉]清理浮動的全家