清除浮動的方式和優缺點

　　浮動(float)，一個我們即愛又恨的屬性。愛，因為通過浮動，我們能很方便地布局； 恨，浮動之后遺留下來太多的問題需要解決，特別是IE6-7（以下無特殊說明均指 windows 平台的 IE瀏覽器）。也許很多人都有這樣的疑問，浮動從何而來？我們為何要清除浮動？清除浮動的原理是什么？本文將一步一步地深入剖析其中的奧秘，讓浮動使用起來更加得心應手。　　

　　一、清除浮動 還是 閉合浮動 （Enclosing float or Clearing float）？

　　很多人都已經習慣稱之為清除浮動，以前我也一直這么叫着，但是確切地來說是不准確的。我們應該用嚴謹的態度來對待代碼，也能更好地幫助我們理解開頭的三個問題。
　　1）清除浮動：清除對應的單詞是 clear，對應CSS中的屬性是 clear：left | right | both | none；
　　2）閉合浮動：更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。

　　通過以上實例發現，其實我們想要達到的效果更確切地說是閉合浮動，而不是單純的清除浮動，在footer上設置clear：both清除浮動並不能解決warp高度塌陷的問題。  
　　結論：用閉合浮動比清除浮動更加嚴謹，所以后文中統一稱之為：閉合浮動。

　　二、為何要清除浮動？

　　要解答這個問題，我們得先說說CSS中的定位機制：普通流，浮動，絕對定位 （其中"position:fixed" 是 "position:absolute" 的一個子類）。
　　1）普通流：很多人或者文章稱之為文檔流或者普通文檔流，其實標准里根本就沒有這個詞。如果把文檔流直譯為英文就是 document flow ，但標准里只有另一個詞，叫做普通流 （normal flow)，或者稱之為常規流。但似乎大家更習慣文檔流的稱呼，因為很多中文翻　　譯的書就是這么來的。比如《CSS Mastery》，英文原書中至始至終都只有普通流 normal flow（普通流） 這一詞，從來沒出現過document flow （文檔流）

　　2）浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動之后，不會影響到塊級框的布局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（“高度塌陷”現象）。顧名思義，就是漂浮於普通流之上，像浮雲一樣，但是只能左右浮動。

　　正是因為浮動的這種特性，導致本屬於普通流中的元素浮動之后，包含框內部由於不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。在實際布局中，往往這並不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。

　　絕對定位就不多說了，不在本文討論范圍之內，下回分解。

 

　　1）以前清除浮動的時候總是在想要清除浮動的元素后面加：　

<div style="clear:both;"></div>

　　優點：通俗易懂，容易掌握
　　點：可以想象通過此方法，會添加多少無意義的空標簽，有違結構與表現的分離，在后期維護中將是噩夢，這是堅決不能忍受的，所以你看了這篇文章之后還是建議不要用了吧。

 

　　2）使用 br標簽和其自身的 html屬性

　　這個方法有些小眾，br 有 clear=“all | left | right | none” 屬性　　　

        <div class="warp" id="float2">
            <h2>2）使用 br標簽和其自身的 html屬性</h2>
            <div class="main left">.main{float:left;}</div>
            <div class="side left">.side{float:right;}</div>
            <br clear="all" />
        </div>
        <div class="footer">.footer</div>

　　優點：比空標簽方式語義稍強，代碼量較少
　　缺點：同樣有違結構與表現的分離，不推薦使用

 

　　3)父元素設置 overflow：hidden

　　通過設置父元素overflow值設置為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1；

        <div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
            <h2>3)父元素設置 overflow </h2>
            <div class="main left">.main{float:left;}</div>
            <div class="side left">.side{float:right;}</div>
        </div>
        <div class="footer">.footer</div>

　　優點：不存在結構和語義化問題，代碼量極少
　　缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素；04年POPO就發現overflow:hidden會導致中鍵失效，這是我作為一個多標簽瀏覽控所不能接受的。所以還是不要使用了

 

　　4)父元素設置 overflow：auto 屬性

　　同樣IE6需要觸發hasLayout，演示和3差不多
　　優點：不存在結構和語義化問題，代碼量極少
　　缺點：多個嵌套后，firefox某些情況會造成內容全選；IE中 mouseover 造成寬度改變時會出現最外層模塊有滾動條等，firefox早期版本會無故產生focus等, 請看 嗷嗷的 Demo ,不要使用

 

　　5）父元素也設置浮動

　　優點：不存在結構和語義化問題，代碼量極少
　　缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用

 

　　6）父元素設置display:table

　　優點：結構語義化完全正確，代碼量極少
　　缺點：盒模型屬性已經改變，由此造成的一系列問題，得不償失，不推薦使用

 

　　7）使用:after 偽元素

　　需要注意的是 :after是偽元素（Pseudo-Element），不是偽類（某些CSS手冊里面稱之為“偽對象”），很多清除浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態度。
　　由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

　　下面是用after偽類實現，兼容多種瀏覽器：

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        /* 為兼容IE6,IE7，因為ie6,ie7不能用after偽類 */
        .clearfix{            
            zoom:1;
        }

　　優點：結構和語義化完全正確,代碼量居中
　　缺點：復用方式不當會造成代碼量增加　　

 

　　一般情況下，如果父層內部有浮動(float)可能導致父層的高度為0，加上clearfix后就行了。

 HTML:
　　　　 <div class="parent clearfix">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
　　　　
　　　　  CSS:
        .clearfix {
            zoom: 1
        }
        
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .parent {
            background-color: red;
            width: 120px;
        }
        
        .left {
            float: left;
            background-color: pink;
            height: 60px;
        }
        
        .right {
            float: right;
            background-color: #abcdef;
        }