sEP上海云路網絡科技有限公司
浮動(float)，一個我們即愛又恨的屬性。愛，因為通過浮動，我們能很方便地布局； 恨，浮動之后遺留下來太多的問題需要解決，特別是IE6-7（以下無特殊說明均指 windows 平臺的 IE瀏覽器）。也許很多人都有這樣的疑問，浮動從何而來？我們為何要清除浮動？清除浮動的原理是什么？本文將一步一步地深入剖析其中的奧秘，讓浮動使用起來更加得心應手。sEP上海云路網絡科技有限公司
很多人都已經習慣稱之為清除浮動，以前我也一直這么叫著，但是確切地來說是不準確的。我們應該用嚴謹的態度來對待代碼，也能更好地幫助我們理解開頭的三個問題。sEP上海云路網絡科技有限公司
1）清除浮動：清除對應的單詞是 clear，對應CSS中的屬性是 clear：left | right | both | none；sEP上海云路網絡科技有限公司
2）閉合浮動：更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。sEP上海云路網絡科技有限公司
兩者的區別請看優雅的 DemosEP上海云路網絡科技有限公司
通過以上實例發現，其實我們想要達到的效果更確切地說是閉合浮動，而不是單純的清除浮動，在footer上設置clear：both清除浮動并不能解決warp高度塌陷的問題。 sEP上海云路網絡科技有限公司
結論：用閉合浮動比清除浮動更加嚴謹，所以后文中統一稱之為：閉合浮動。sEP上海云路網絡科技有限公司
要解答這個問題，我們得先說說CSS中的定位機制：普通流，浮動，絕對定位 （其中"position:fixed" 是 "position:absolute" 的一個子類）。sEP上海云路網絡科技有限公司
1）普通流：很多人或者文章稱之為文檔流或者普通文檔流，其實標準里根本就沒有這個詞。如果把文檔流直譯為英文就是 document flow ，但標準里只有另一個詞，叫做普通流（normal flow)，或者稱之為常規流。但似乎大家更習慣文檔流的稱呼，因為很多中文翻譯的書就是這么來的。比如《CSS Mastery》，英文原書中至始至終都只有普通流 normal flow（普通流）這一詞，從來沒出現過document flow （文檔流）sEP上海云路網絡科技有限公司
2）浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于文檔中的普通流，當一個元素浮動之后，不會影響到塊級框的布局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（“高度塌陷”現象）。顧名思義，就是漂浮于普通流之上，像浮云一樣，但是只能左右浮動。sEP上海云路網絡科技有限公司
正是因為浮動的這種特性，導致本屬于普通流中的元素浮動之后，包含框內部由于不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。在實際布局中，往往這并不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。sEP上海云路網絡科技有限公司
絕對定位就不多說了，不在本文討論范圍之內，下回分解。sEP上海云路網絡科技有限公司
先看一下清理浮動的各種方法：sEP上海云路網絡科技有限公司
1）添加額外標簽sEP上海云路網絡科技有限公司
這是在學校老師就告訴我們的 一種方法，通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，其他標簽br等亦可。sEP上海云路網絡科技有限公司
<div class="warp" id="float1">sEP上海云路網絡科技有限公司
<h2>1）添加額外標簽</h2>sEP上海云路網絡科技有限公司
<div class="main left">.main{float:left;}</div>sEP上海云路網絡科技有限公司
<div class="side left">.side{float:right;}</div>sEP上海云路網絡科技有限公司
<div style="clear:both;"></div>sEP上海云路網絡科技有限公司
</div>sEP上海云路網絡科技有限公司
<div class="footer">.footer</div>sEP上海云路網絡科技有限公司
優雅的 DemosEP上海云路網絡科技有限公司
優點：通俗易懂，容易掌握sEP上海云路網絡科技有限公司
缺點：可以想象通過此方法，會添加多少無意義的空標簽，有違結構與表現的分離，在后期維護中將是噩夢，這是堅決不能忍受的，所以你看了這篇文章之后還是建議不要用了吧。sEP上海云路網絡科技有限公司
2）使用 br標簽和其自身的 html屬性sEP上海云路網絡科技有限公司
這個方法有些小眾，br 有 clear=“all | left | right | none” 屬性sEP上海云路網絡科技有限公司
<div class="warp" id="float2">sEP上海云路網絡科技有限公司
<h2>2）使用 br標簽和其自身的 html屬性</h2>sEP上海云路網絡科技有限公司
<div class="main left">.main{float:left;}</div>sEP上海云路網絡科技有限公司
<div class="side left">.side{float:right;}</div>sEP上海云路網絡科技有限公司
<br clear="all" />sEP上海云路網絡科技有限公司
</div>sEP上海云路網絡科技有限公司
<div class="footer">.footer</div>sEP上海云路網絡科技有限公司
優雅的 DemosEP上海云路網絡科技有限公司
優點：比空標簽方式語義稍強，代碼量較少sEP上海云路網絡科技有限公司
缺點：同樣有違結構與表現的分離，不推薦使用sEP上海云路網絡科技有限公司
3)父元素設置 overflow：hiddensEP上海云路網絡科技有限公司
通過設置父元素overflow值設置為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1；sEP上海云路網絡科技有限公司
<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">sEP上海云路網絡科技有限公司
<h2>3)父元素設置 overflow </h2>sEP上海云路網絡科技有限公司
<div class="main left">.main{float:left;}</div>sEP上海云路網絡科技有限公司
<div class="side left">.side{float:right;}</div>sEP上海云路網絡科技有限公司
</div>sEP上海云路網絡科技有限公司
<div class="footer">.footer</div>sEP上海云路網絡科技有限公司
優雅的 DemosEP上海云路網絡科技有限公司
優點：不存在結構和語義化問題，代碼量極少sEP上海云路網絡科技有限公司
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素；04年POPO就發現overflow:hidden會導致中鍵失效，這是我作為一個多標簽瀏覽控所不能接受的。所以還是不要使用了sEP上海云路網絡科技有限公司
4)父元素設置 overflow：auto 屬性sEP上海云路網絡科技有限公司
同樣IE6需要觸發hasLayout，演示和3差不多sEP上海云路網絡科技有限公司
優點：不存在結構和語義化問題，代碼量極少sEP上海云路網絡科技有限公司
缺點：多個嵌套后，Firefox某些情況會造成內容全選；IE中 mouSEOver 造成寬度改變時會出現最外層模塊有滾動條等，firefox早期版本會無故產生focus等, 請看 嗷嗷的 Demo,不要使用sEP上海云路網絡科技有限公司
5）父元素也設置浮動sEP上海云路網絡科技有限公司
優點：不存在結構和語義化問題，代碼量極少sEP上海云路網絡科技有限公司
缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用sEP上海云路網絡科技有限公司
6）父元素設置display:tablesEP上海云路網絡科技有限公司
優雅的 DemosEP上海云路網絡科技有限公司
優點：結構語義化完全正確，代碼量極少sEP上海云路網絡科技有限公司
缺點：盒模型屬性已經改變，由此造成的一系列問題，得不償失，不推薦使用sEP上海云路網絡科技有限公司
7）使用:after 偽元素sEP上海云路網絡科技有限公司
需要注意的是 :after是偽元素（Pseudo-Element），不是偽類（某些CSS手冊里面稱之為“偽對象”），很多閉合浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態度。sEP上海云路網絡科技有限公司
由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。sEP上海云路網絡科技有限公司
該方法源自于: How To Clear Floats Without Structural MarkupsEP上海云路網絡科技有限公司
原文全部代碼如下:sEP上海云路網絡科技有限公司
<style type="text/css"> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* for IE/Mac */ </style> <!--[if IE]> <style type="text/css"> .clearfix {zoom: 1;/* triggers hasLayout */ display: block;/* resets display for IE/Win */} </style> <![endif]--> 鑒于 IE/Mac的市場占有率極低,我們直接忽略掉,最后精簡的代碼如下:sEP上海云路網絡科技有限公司.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}sEP上海云路網絡科技有限公司
.clearfix { *zoom:1; }sEP上海云路網絡科技有限公司
優雅的 DemosEP上海云路網絡科技有限公司
優點：結構和語義化完全正確,代碼量居中sEP上海云路網絡科技有限公司
缺點：復用方式不當會造成代碼量增加sEP上海云路網絡科技有限公司
小結sEP上海云路網絡科技有限公司
通過對比，我們不難發現，其實以上列舉的方法，無非有兩類：sEP上海云路網絡科技有限公司
其一，通過在浮動元素的末尾添加一個空元素，設置 clear：both屬性，after偽元素其實也是通過 content 在元素的后面生成了內容為一個點的塊級元素；sEP上海云路網絡科技有限公司
其二，通過設置父元素 overflow 或者display：table 屬性來閉合浮動，我們來探討一下這里面的原理。sEP上海云路網絡科技有限公司
在CSS2.1里面有一個很重要的概念，但是國內的技術博客介紹到的比較少，那就是 Block formatting contexts （塊級格式化上下文），以下簡稱 BFC。sEP上海云路網絡科技有限公司
CSS3里面對這個規范做了改動，稱之為：flow root，并且對觸發條件進行了進一步說明。sEP上海云路網絡科技有限公司
那么如何觸發BFC呢？sEP上海云路網絡科技有限公司
需要注意的是，display:table 本身并不會創建BFC，但是它會產生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以創建新的BFC，換句話說，觸發塊級格式化上下文的是匿名框，而不是display:table。所以通過display:table和display:table-cell創建的BFC效果是不一樣的。sEP上海云路網絡科技有限公司
fieldset 元素在www.w3.org里目前沒有任何有關這個觸發行為的信息，直到HTML5標準里才出現。有些瀏覽器bugs（Webkit，Mozilla）提到過這個觸發行為，但是沒有任何官方聲明。實際上，即使fieldset在大多數的瀏覽器上都能創建新的塊級格式化上下文，開發者也不應該把這當做是理所當然的。CSS 2.1沒有定義哪種屬性適用于表單控件，也沒有定義如何使用CSS來給它們添加樣式。用戶代理可能會給這些屬性應用CSS屬性，建議開發者們把這種支持當做實驗性質的，更高版本的CSS可能會進一步規范這個。sEP上海云路網絡科技有限公司
sEP上海云路網絡科技有限公司
BFC的特性：sEP上海云路網絡科技有限公司
當兩個相鄰的塊框在同一個塊級格式化上下文中時，它們之間垂直方向的外邊距會發生疊加。換句話說，如果這兩個相鄰的塊框不屬于同一個塊級格式化上下文，那么它們的外邊距就不會疊加。sEP上海云路網絡科技有限公司
根據規定，一個塊級格式化上下文的邊框不能和它里面的元素的外邊距重疊。這就意味著瀏覽器將會給塊級格式化上下文創建隱式的外邊距來阻止它和浮動元素的外邊距疊加。由于這個原因，當給一個挨著浮動的塊級格式化上下文添加負的外邊距時將會不起作用（Webkit和IE6在這點上有一個問題——可以看這個測試用例）。sEP上海云路網絡科技有限公司
詳見： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context rootssEP上海云路網絡科技有限公司sEP上海云路網絡科技有限公司
通俗地來說：創建了 BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素，反之亦然，同時BFC任然屬于文檔中的普通流。sEP上海云路網絡科技有限公司
至此，您或許明白了為什么 overflow:hidden或者auto可以閉合浮動了，真是因為父元素創建了新的BFC。對于張鑫旭在對《overflow與zoom”清除浮動”的一些認識 》一文中對于用包裹來解釋閉合浮動的原理，我覺得是不夠嚴謹的，而且沒有依據。并且說道“Firefox等瀏覽器并沒有haslayout的概念”，那么現代瀏覽器是有BFC的，從表現上來說，hasLayout 可以等同于 BFC。sEP上海云路網絡科技有限公司
IE6-7的顯示引擎使用的是一個稱為布局（layout）的內部概念，由于這個顯示引擎自身存在很多的缺陷，直接導致了IE6-7的很多顯示bug。當我們說一個元素“得到 layout”，或者說一個元素“擁有 layout” 的時候，我們的意思是指它的微軟專有屬性 hasLayout http://msdn.microsoft.com/worksh ... r
新聞熱點
疑難解答
