摘要：轉(zhuǎn)自漫談標(biāo)準(zhǔn)中浮動(dòng)令人困惑的部分時(shí)間追溯到年前，那時(shí)剛出道，寫了一篇定位機(jī)制之一普通流，轉(zhuǎn)眼年醬油人生，說好的浮動(dòng)和絕對(duì)定位的篇幅也一拖年。所以標(biāo)準(zhǔn)這兩段是因果關(guān)系，只是額外表明上述定義造成的一種特殊的結(jié)果。

轉(zhuǎn)自漫談標(biāo)準(zhǔn)中CSS浮動(dòng)令人困惑的部分

時(shí)間追溯到4年前，那時(shí)剛出道，寫了一篇CSS定位機(jī)制之一：普通流，轉(zhuǎn)眼4年醬油人生，說好的浮動(dòng)和絕對(duì)定位的篇幅也一拖4年。多少是因?yàn)閷?duì)于熟悉的東西很難提起興致，但更多還是因?yàn)閼卸琛?/p>

這些年一過，瀏覽器環(huán)境的變化令人欣喜。當(dāng)年甚少人討論的BFC等概念，如今也已經(jīng)說爛了。雖尚未滿三十卻深感銳氣不比當(dāng)年——說好的第二第三篇浮動(dòng)和絕對(duì)定位應(yīng)該不會(huì)有了，所以就隨便聊聊浮動(dòng)和絕對(duì)定位的一些麻煩之處——一些很多人可能不知道的，或者故意略過的，或者困惑的地方。

既然是浮動(dòng)，那么首先第一個(gè)問題，什么是浮動(dòng)？

如果是4年前的我，一定會(huì)擺出一堆定義，然后對(duì)著各種可能是人盡皆知的特性碼很多字。如今，要是在讓我解釋什么是浮動(dòng)，我只會(huì)說：“浮動(dòng)===靠邊”，并且我覺得我已經(jīng)找不到比“靠邊”更合適的詞了。

假如我站在一個(gè)方陣隊(duì)伍的中間，浮動(dòng)的意思，無非就是靠邊站，而且，應(yīng)該不會(huì)有人在別人叫你靠邊站的時(shí)候特意跑到另外一行隊(duì)伍里去，這就是其中隱含的一個(gè)限制——“浮動(dòng)發(fā)生在當(dāng)前行”。

大部分時(shí)候我們不會(huì)思考浮動(dòng)在RTL情況下會(huì)是怎樣的，所以不失時(shí)機(jī)地想象一下RTL的浮動(dòng)，可以鍛煉大腦的抽搐功能，加深印象，效果大抵與錯(cuò)用左手類似。

帶過了浮動(dòng)是什么，下面就是正題了。

相當(dāng)一部分人并不知道，外緣高度為零的浮動(dòng)不會(huì)縮短行框，因?yàn)檫@只是css2.1標(biāo)準(zhǔn)里的一段備注。但如果讀過標(biāo)準(zhǔn)的內(nèi)容，相信對(duì)這段話多少會(huì)催生出一些疑問：

  
A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.
  
  
Note: this means that floats with zero outer height or negative outer height do not shorten line boxes.

定義說，緊挨浮動(dòng)的行框會(huì)縮短以提供浮動(dòng)元素足夠的空間。但所謂的“緊挨浮動(dòng)的行框”需要同時(shí)滿足垂直位置的4個(gè)條件。當(dāng)浮動(dòng)元素的外緣高度為零甚至為負(fù)時(shí)，行框無法滿足上述定義的條件，也就不再受浮動(dòng)的影響。所以標(biāo)準(zhǔn)這兩段是因果關(guān)系，“this means”只是額外表明上述定義造成的一種特殊的結(jié)果。

當(dāng)然，個(gè)人覺得，“當(dāng)浮動(dòng)元素沒有外緣高度，不占據(jù)空間，也就不需要行框退讓”這樣的解釋也是說的通的。而行框不縮短，在很大程度上使得浮動(dòng)和絕對(duì)定位表現(xiàn)的很相似——內(nèi)容溢出容器外會(huì)直接形成層疊。

這應(yīng)該是一個(gè)愚蠢的問題：如果對(duì)一個(gè)元素同時(shí)使用浮動(dòng)和絕對(duì)定位的話，會(huì)怎么樣？

葵中劍
  

結(jié)果應(yīng)該是顯而易見的，元素絕對(duì)定位。但不能因?yàn)檫@個(gè)問題而產(chǎn)生困惑，因?yàn)閮烧呖梢怨泊妗Ｖ皇钱?dāng)元素絕對(duì)定位之后，**浮動(dòng)的值被計(jì)算為none**。

這個(gè)問題可以被更復(fù)雜化，從而使得相當(dāng)一部分人產(chǎn)生困惑：

葵中劍

也就是display:none;的情況下同時(shí)浮動(dòng)和絕對(duì)定位，元素的各個(gè)值會(huì)如何？

我們知道，當(dāng)元素display:none;之后，元素的position和float都不會(huì)被應(yīng)用(具體可參見標(biāo)準(zhǔn)9.7節(jié))。所以，這里需要分清的是計(jì)算值和是否被應(yīng)用。這個(gè)例子里，position和float的計(jì)算值都不會(huì)受到影響(分別是absolute和left)，單單只是沒有被應(yīng)用而已。

現(xiàn)在去掉display:none;，position和float就被應(yīng)用在元素上，此時(shí)，float的值又將被計(jì)算為none。

這個(gè)問題，問的是標(biāo)準(zhǔn)9.7節(jié)，隱含的則是計(jì)算值以及值是否被應(yīng)用之間區(qū)別的理解。

標(biāo)準(zhǔn)里關(guān)于浮動(dòng)部分，最讓人困惑的語句莫過于9.5.1里的這段：

  
But in CSS 2.1, if, within the block formatting context, there is an in-flow negative vertical margin such that the float"s position is above the position it would be at were all such negative margins set to zero, the position of the float is undefined.

如果你讀過標(biāo)準(zhǔn)想必會(huì)對(duì)這句話有印象，這段話的上文是浮動(dòng)行為的精確定義。我在第一次閱讀的時(shí)候，這段話給我?guī)淼睦Щ笫亲畲蟮模骸安粒锻嬉獍?，undefined？”

造成困擾的原因有二：其一，作為非native speaker，即便自認(rèn)為英語還不錯(cuò)，對(duì)于這種文法錯(cuò)亂加上混合了專有名詞的句子，也有點(diǎn)力不從心。其二，這里的undefined并不是指值，而是指標(biāo)準(zhǔn)本身。

實(shí)際上，我之后看過很多人對(duì)這段內(nèi)容的翻譯，但實(shí)際上絕大部分都是硬著頭皮來的，翻譯出來的內(nèi)容可能作者自己都未理解到位，詞與句都甚為牽強(qiáng)。這個(gè)比較無奈，于是我只好把這段話發(fā)給一個(gè)懂css的老外，讓他幫我斷句，他是這樣回復(fù)我的：

  
haha, terribly written sentence
  
  
quite confusing
  
  
So basically if you set the margins
  
  
the vertical margin
  
  
to something negative
  
  
-1 -2 etc
  
  
If the float position is above where it would be if the margins were at 0
  
  
then the position is considered "undefined"

這樣就清楚多了，至少我一下子就明白了，這個(gè)該死的寫出這段話的人究竟想說什么，而我再將其大概概括到最短：“垂直負(fù)邊距的浮動(dòng)位置在標(biāo)準(zhǔn)里沒定義”。

沒錯(cuò)，undefined指的是標(biāo)準(zhǔn)里沒有相關(guān)的定義。為什么要加這么一段蛋疼的描述呢？9.5.1節(jié)那9條精確定義了浮動(dòng)行為，其中，第5條第6條：

  
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

  
The outer top of an element"s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

  

定義中沒有例外。但例外恰恰是有的，那就垂直負(fù)邊距。而所有的瀏覽器在實(shí)現(xiàn)時(shí)，浮動(dòng)元素都會(huì)跟著垂直負(fù)邊距移動(dòng)，從而高于定義中的描述(具體參見CSS2.1 Issue 229)。為了修正標(biāo)準(zhǔn)，這句話應(yīng)運(yùn)而生了！不過糟糕的文法就實(shí)在不敢恭維...