(转)那些年我们一起清除过的浮动
本文轉(zhuǎn)載自：http://www.cnblogs.com/mofish/archive/2012/05/14/2499400.html
浮動(float)，一個我們即愛又恨的屬性。愛，因?yàn)橥ㄟ^浮動，我們能很方便地布局； 恨，浮動之后遺留下來太多的問題需要解決，特別是IE6-7（以下無特殊說明均指 windows 平臺的 IE瀏覽器）。也許很多人都有這樣的疑問，浮動從何而來？我們?yōu)楹我宄?#xff1f;清除浮動的原理是什么？本文將一步一步地深入剖析其中的奧秘，讓浮動使用起來更加得心應(yīng)手。
一、清除浮動 還是 閉合浮動 （Enclosing float or Clearing float）？
很多人都已經(jīng)習(xí)慣稱之為清除浮動，以前我也一直這么叫著，但是確切地來說是不準(zhǔn)確的。我們應(yīng)該用嚴(yán)謹(jǐn)?shù)膽B(tài)度來對待代碼，也能更好地幫助我們理解開頭的三個問題。
1）清除浮動：清除對應(yīng)的單詞是 clear，對應(yīng)CSS中的屬性是 clear：left | right | both | none；
2）閉合浮動：更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。
兩者的區(qū)別?請看優(yōu)雅的 Demo
通過以上實(shí)例發(fā)現(xiàn)，其實(shí)我們想要達(dá)到的效果更確切地說是閉合浮動，而不是單純的清除浮動，在footer上設(shè)置clear：both清除浮動并不能解決warp高度塌陷的問題。 ?
結(jié)論：用閉合浮動比清除浮動更加嚴(yán)謹(jǐn)，所以后文中統(tǒng)一稱之為：閉合浮動。
二、為何要清除浮動？
要解答這個問題，我們得先說說CSS中的定位機(jī)制：普通流，浮動，絕對定位 （其中"position:fixed" 是 "position:absolute" 的一個子類）。
1）普通流：很多人或者文章稱之為文檔流或者普通文檔流，其實(shí)標(biāo)準(zhǔn)里根本就沒有這個詞。如果把文檔流直譯為英文就是 document flow ，但標(biāo)準(zhǔn)里只有另一個詞，叫做?普通流?（normal flow)，或者稱之為常規(guī)流。但似乎大家更習(xí)慣文檔流的稱呼，因?yàn)楹芏嘀形姆g的書就是這么來的。比如《CSS Mastery》，英文原書中至始至終都只有普通流 normal flow（普通流）?這一詞，從來沒出現(xiàn)過document flow （文檔流）
2）浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于文檔中的普通流，當(dāng)一個元素浮動之后，不會影響到 塊級框的布局而只會影響內(nèi)聯(lián)框（通常是文本）的排列，文檔中的普通流就會表現(xiàn)得和浮動框不存在一樣，當(dāng)浮動框高度超出包含框的時候，也就會出現(xiàn)包含框不會 自動伸高來閉合浮動元素（“高度塌陷”現(xiàn)象）。顧名思義，就是漂浮于普通流之上，像浮云一樣，但是只能左右浮動。
正是因?yàn)楦拥倪@種特性，導(dǎo)致本屬于普通流中的元素浮動之后，包含框內(nèi)部由于不存在其他普通流元素了，也就表現(xiàn)出高度為0（高度塌陷）。在實(shí)際布局中，往往這并不是我們所希望的，所以需要閉合浮動元素，使其包含框表現(xiàn)出正常的高度。
絕對定位就不多說了，不在本文討論范圍之內(nèi)，下回分解。
三、清除浮動的原理——了解 hasLayout 和 Block formatting contexts
先看一下清理浮動的各種方法：
1）添加額外標(biāo)簽
這是在學(xué)校老師就告訴我們的 一種方法，通過在浮動元素末尾添加一個空的標(biāo)簽例如 <div style=”clear:both”></div>，其他標(biāo)簽br等亦可。
?<div class="warp" id="float1">
<h2>1）添加額外標(biāo)簽</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>
?優(yōu)雅的 Demo
優(yōu)點(diǎn)：通俗易懂，容易掌握
缺點(diǎn)：可以想象通過此方法，會添加多少無意義的空標(biāo)簽，有違結(jié)構(gòu)與表現(xiàn)的分離，在后期維護(hù)中將是噩夢，這是堅(jiān)決不能忍受的，所以你看了這篇文章之后還是建議不要用了吧。
?2）使用 br標(biāo)簽和其自身的 html屬性
這個方法有些小眾，br 有 clear=“all | left | right | none” 屬性
?<div class="warp" id="float2">
<h2>2）使用 br標(biāo)簽和其自身的 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>
?優(yōu)雅的 Demo
?優(yōu)點(diǎn)：比空標(biāo)簽方式語義稍強(qiáng)，代碼量較少
缺點(diǎn)：同樣有違結(jié)構(gòu)與表現(xiàn)的分離，不推薦使用
?3)父元素設(shè)置 overflow：hidden
通過設(shè)置父元素overflow值設(shè)置為hidden；在IE6中還需要觸發(fā) hasLayout ，例如 zoom：1；
?<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
<h2>3)父元素設(shè)置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>
?優(yōu)雅的 Demo
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題，代碼量極少
缺點(diǎn)：內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素；04年P(guān)OPO就發(fā)現(xiàn)overflow:hidden會導(dǎo)致中鍵失效，這是我作為一個多標(biāo)簽瀏覽控所不能接受的。所以還是不要使用了
4)父元素設(shè)置 overflow：auto 屬性
同樣IE6需要觸發(fā)hasLayout，演示和3差不多
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題，代碼量極少
缺點(diǎn)：多個嵌套后，firefox某些情況會造成內(nèi)容全選；IE中 mouseover 造成寬度改變時會出現(xiàn)最外層模塊有滾動條等，firefox早期版本會無故產(chǎn)生focus等, 請看 嗷嗷的?Demo?,不要使用
5）父元素也設(shè)置浮動
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題，代碼量極少
缺點(diǎn)：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用
6）父元素設(shè)置display:table
?優(yōu)雅的 Demo
?優(yōu)點(diǎn)：結(jié)構(gòu)語義化完全正確，代碼量極少
缺點(diǎn)：盒模型屬性已經(jīng)改變，由此造成的一系列問題，得不償失，不推薦使用
7）使用:after 偽元素
需要注意的是 :after是偽元素（Pseudo-Element），不是偽類（某些CSS手冊里面稱之為“偽對象”），很多清除浮動大全之類的文章都稱之為偽類，不過csser要嚴(yán)謹(jǐn)一點(diǎn)，這是一種態(tài)度。
由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
?該方法源自于:?How To Clear Floats Without Structural Markup
原文全部代碼如下:
<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的市場占有率極低,我們直接忽略掉,最后精簡的代碼如下:?.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both;?}
.clearfix { *zoom:1; }
?優(yōu)雅的 Demo
優(yōu)點(diǎn)：結(jié)構(gòu)和語義化完全正確,代碼量居中
缺點(diǎn)：復(fù)用方式不當(dāng)會造成代碼量增加
?小結(jié)
通過對比，我們不難發(fā)現(xiàn)，其實(shí)以上列舉的方法，無非有兩類：
其一，通過在浮動元素的末尾添加一個空元素，設(shè)置 clear：both屬性，after偽元素其實(shí)也是通過 content 在元素的后面生成了內(nèi)容為一個點(diǎn)的塊級元素；
其二，通過設(shè)置父元素 overflow 或者display：table 屬性來閉合浮動，我們來探討一下這里面的原理。
在CSS2.1里面有一個很重要的概念，但是國內(nèi)的技術(shù)博客介紹到的比較少，那就是?Block formatting contexts?（塊級格式化上下文），以下簡稱 BFC。
CSS3里面對這個規(guī)范做了改動，稱之為：flow root，并且對觸發(fā)條件進(jìn)行了進(jìn)一步說明。
那么如何觸發(fā)BFC呢？
- float 除了none以外的值?
? - overflow 除了visible 以外的值（hidden，auto，scroll ）?
? - display (table-cell，table-caption，inline-block)?
? - position（absolute，fixed）?
? - fieldset元素
需要注意的是，display:table 本身并不會創(chuàng)建BFC，但是它會產(chǎn)生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以創(chuàng)建新的BFC，換句話說，觸發(fā)塊級格式化上下文的是匿名框，而不是 display:table。所以通過display:table和display:table-cell創(chuàng)建的BFC效果是不一樣的。
?fieldset 元素在www.w3.org里目前沒有任何有關(guān)這個觸發(fā)行為的信息，直到HTML5標(biāo)準(zhǔn)里才出現(xiàn)。有些瀏覽器bugs（Webkit，Mozilla）提到過這個觸發(fā)行為，但是沒有任何官方聲明。實(shí)際上，即使fieldset在大多數(shù)的瀏覽器上都能創(chuàng)建新的塊級格式化上下文，開發(fā)者也不應(yīng)該把這當(dāng)做是理所當(dāng)然的。CSS 2.1沒有定義哪種屬性適用于表單控件，也沒有定義如何使用CSS來給它們添加樣式。用戶代理可能會給這些屬性應(yīng)用CSS屬性，建議開發(fā)者們把這種支持當(dāng)做實(shí)驗(yàn)性質(zhì)的，更高版本的CSS可能會進(jìn)一步規(guī)范這個。
?
BFC的特性：
1)塊級格式化上下文會阻止外邊距疊加
當(dāng)兩個相鄰的塊框在同一個塊級格式化上下文中時，它們之間垂直方向的外邊距會發(fā)生疊加。換句話說，如果這兩個相鄰的塊框不屬于同一個塊級格式化上下文，那么它們的外邊距就不會疊加。
2)塊級格式化上下文不會重疊浮動元素
根據(jù)規(guī)定，一個塊級格式化上下文的邊框不能和它里面的元素的外邊距重疊。這就意味著瀏覽器將會給塊級格式化上下文創(chuàng)建隱式的外邊距來阻止它和浮動元 素的外邊距疊加。由于這個原因，當(dāng)給一個挨著浮動的塊級格式化上下文添加負(fù)的外邊距時將會不起作用（Webkit和IE6在這點(diǎn)上有一個問題——可以看這 個測試用例）。?
3)塊級格式化上下文通常可以包含浮動
詳見： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots?
??
通俗地來說：創(chuàng)建了 BFC的元素就是一個獨(dú)立的盒子，里面的子元素不會在布局上影響外面的元素，反之亦然，同時BFC任然屬于文檔中的普通流。
至此，您或許明白了為什么 overflow:hidden或者auto可以閉合浮動了，真是因?yàn)楦冈貏?chuàng)建了新的BFC。對于張鑫旭在對《overflow與zoom”清除浮動”的一些認(rèn)識 》一文中對于用包裹來解釋閉合浮動的原理，我覺得是不夠嚴(yán)謹(jǐn)?shù)?#xff0c;而且沒有依據(jù)。并且說道“Firefox等瀏覽器并沒有haslayout的概念”，那么現(xiàn)代瀏覽器是有BFC的，從表現(xiàn)上來說，hasLayout 可以等同于 BFC。
IE6-7的顯示引擎使用的是一個稱為布局（layout）的內(nèi)部概念，由于這個顯示引擎自身存在很多的缺陷，直接導(dǎo)致了IE6-7的很多顯示 bug。當(dāng)我們說一個元素“得到 layout”，或者說一個元素“擁有 layout” 的時候，我們的意思是指它的微軟專有屬性 hasLayout?http://msdn.microsoft.com/worksh ... rties/haslayout.asp?為此被設(shè)為了 true 。IE6-7使用布局的概念來控制元素的尺寸和定位，那些擁有布局（have layout）的元素負(fù)責(zé)本身及其子元素的尺寸設(shè)置和定位。如果一個元素的 hasLayout 為false，那么它的尺寸和位置由最近擁有布局的祖先元素控制。
觸發(fā)hasLayout的條件：
- position: absolute?
? - float: left|right?
? - display: inline-block?
? - width: 除 “auto” 外的任意值?
? - height: 除 “auto” 外的任意值 （例如很多人清除浮動會用到 height: 1%??）?
? - zoom: 除 “normal” 外的任意值 (MSDN)?http://msdn.microsoft.com/worksh ... properties/zoom.asp?
? - writing-mode: tb-rl (MSDN)?http://msdn.microsoft.com/worksh ... ies/writingmode.asp
在 IE7 中，overflow 也變成了一個 layout 觸發(fā)器：
- overflow: hidden|scroll|auto?（ 這個屬性在IE之前版本中沒有觸發(fā) layout 的功能。?）
? - overflow-x|-y: hidden|scroll|auto?（CSS3 盒模型中的屬性，尚未得到瀏覽器的廣泛支持。他們在之前IE版本中同樣沒有觸發(fā) layout 的功能）
hasLayout更詳細(xì)的解釋請參見 old9翻譯的 大名鼎鼎的?《On having layout》一文（英文原文：http://www.satzansatz.de/cssd/onhavinglayout.htm），由于old9博客被墻，中文版地址：
IE8使用了全新的顯示引擎，據(jù)稱不使用 hasLayout屬性了，因此解決了很多深惡痛絕的bug。
綜上所述：
在支持BFC的瀏覽器（IE8+，firefox，chrome，safari）通過創(chuàng)建新的BFC閉合浮動；
在不支持 BFC的瀏覽器 （IE6-7），通過觸發(fā) hasLayout 閉合浮動。
?
四、閉合浮動方法——精益求精
上面已經(jīng)列舉了7種閉合浮動的方法，通過第三節(jié)分析的原理，我們發(fā)現(xiàn)其實(shí)更多的：display：table- cell，display：inline-block等只要觸發(fā)了BFC的屬性值都可以閉合浮動。從各個方面比較，after偽元素閉合浮動無疑是相對比 較好的解決方案了，下面詳細(xì)說說該方法。
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both;?}
.clearfix { *zoom:1; }
1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
2) height:0 避免生成內(nèi)容破壞原有布局的高度。
3) visibility:hidden?使生成的內(nèi)容不可見，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點(diǎn)擊和交互;
4）通過 content:"."生成內(nèi)容作為最后一個元素，至于content里面是點(diǎn)還是其他都是可以的，例如oocss里面就有經(jīng)典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面內(nèi)容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0?content:”" 仍然會產(chǎn)生額外的空隙；
5）zoom：1 觸發(fā)IE hasLayout。
通過分析發(fā)現(xiàn)，除了clear：both用來清除浮動的，其他代碼無非都是為了隱藏掉content生成的內(nèi)容，這也就是其他版本的閉合浮動為什么會有font-size：0，line-height：0。
?
精益求精方案一：
相對于空標(biāo)簽閉合浮動的方法代碼似乎還是有些冗余，通過查詢發(fā)現(xiàn)Unicode字符里有一個“零寬度空格”，也就是U+200B?，這個字符本身是不可見的，所以我們完全可以省略掉 visibility:hidden了
.clearfix:after {content:"\200B"; display:block; height:0; clear:both;?}
.clearfix { *zoom:1; }.
精益求精方案二：
由Nicolas Gallagher 大濕提出來的,原文:A new micro clearfix hack，該方法也不存在firefox中空隙的問題。
/* For modern browsers */
.cf:before,.cf:after {
content:"";
display:table;
}
.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }
?需要注意的是：
上面的方法用到了? ：before偽元素，很多人對這個有些迷惑，到底我什么時候需要用before呢？為什么方案一沒有呢？其實(shí)它是用來處理margin邊距重疊的，由于 內(nèi)部元素 float 創(chuàng)建了BFC，導(dǎo)致內(nèi)部元素的margin-top和 上一個盒子的margin-bottom 發(fā)生疊加。如果這不是你所希望的，那么就可以加上before，如果只是單純的閉合浮動，after就夠了！并不是如同大漠《Clear Float》一文所說的：但只使用clearfix:after時在跨瀏覽器兼容問題會存在一個垂直邊距疊加的bug，這不是bug，是BFC應(yīng)該有的特性。
請看優(yōu)雅的Demo
進(jìn)一步了解請看：?《clearfix改良及overflow:hidden詳解【譯】》
在實(shí)際開發(fā)中，改進(jìn)方案一由于存在Unicode字符不適合內(nèi)嵌CSS的GB2312編碼的頁面，使用方案7完全可以解決我們的需求了，改進(jìn)方案二 等待大家的進(jìn)一步實(shí)踐。方案3、4通過overflow閉合浮動，實(shí)際上已經(jīng)創(chuàng)建了新的 塊級格式化上下文，這將導(dǎo)致其布局和相對于浮動的行為等發(fā)生一系列的變化，清除浮動只不過是一系列變化中的一個作用而已。所以為了閉合浮動去改變?nèi)痔?性，這是不明智的，帶來的風(fēng)險就是一系列的bug，比如firefox 早期版本產(chǎn)生 focus，截斷絕對定位的層等等。始終要明白，如果單單只是需要閉合浮動，overflow就不要使用，而不是某些文章所說的“慎用”。
前前后后花了三天寫完了這篇文章。如果覺得本文對您有幫助，您的留言就是對我最大的支持，同時由于精力有限，歡迎指出文中錯誤與不足，共勉之！
參考資料:
?
- Page breaks and block-formatting contexts:?Allowed page breaks (13.3.3)
- Clearfix and block formatting contexts:?Everything you Know about Clearfix is Wrong
- Block formating contexts, “hasLayout” – IE Window vs CSS2.1 browsers: simulations.
- New block formatting contexts next to floats
- Control Block Formatting Context
- On having layout， [譯文]On having layout ?http://old9.blogsome.com/2006/04/11/onhavinglayout
- “HasLayout” Overview
- hasLayout Property
- IE hasLayout
- https://developer.mozilla.org/en/CSS/block_formatting_context
總結(jié)
以上是生活随笔為你收集整理的(转)那些年我们一起清除过的浮动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java Learning Path（四
- 下一篇： 通过案例学调优之--SQL Profil