資訊專欄INFORMATION COLUMN
摘要：轉自漫談標準中浮動令人困惑的部分時間追溯到年前，那時剛出道，寫了一篇定位機制之一普通流，轉眼年醬油人生，說好的浮動和絕對定位的篇幅也一拖年。所以標準這兩段是因果關系，只是額外表明上述定義造成的一種特殊的結果。
轉自漫談標準中CSS浮動令人困惑的部分
時間追溯到4年前，那時剛出道，寫了一篇CSS定位機制之一：普通流，轉眼4年醬油人生，說好的浮動和絕對定位的篇幅也一拖4年。多少是因為對于熟悉的東西很難提起興致，但更多還是因為懶惰。
這些年一過，瀏覽器環境的變化令人欣喜。當年甚少人討論的BFC等概念，如今也已經說爛了。雖尚未滿三十卻深感銳氣不比當年——說好的第二第三篇浮動和絕對定位應該不會有了，所以就隨便聊聊浮動和絕對定位的一些麻煩之處——一些很多人可能不知道的，或者故意略過的，或者困惑的地方。
既然是浮動，那么首先第一個問題，什么是浮動？
如果是4年前的我，一定會擺出一堆定義，然后對著各種可能是人盡皆知的特性碼很多字。如今，要是在讓我解釋什么是浮動，我只會說：“浮動===靠邊”，并且我覺得我已經找不到比“靠邊”更合適的詞了。
假如我站在一個方陣隊伍的中間，浮動的意思，無非就是靠邊站，而且，應該不會有人在別人叫你靠邊站的時候特意跑到另外一行隊伍里去，這就是其中隱含的一個限制——“浮動發生在當前行”。
大部分時候我們不會思考浮動在RTL情況下會是怎樣的，所以不失時機地想象一下RTL的浮動，可以鍛煉大腦的抽搐功能，加深印象，效果大抵與錯用左手類似。
帶過了浮動是什么，下面就是正題了。
浮動外緣高度為零相當一部分人并不知道，外緣高度為零的浮動不會縮短行框，因為這只是css2.1標準里的一段備注。但如果讀過標準的內容，相信對這段話多少會催生出一些疑問：
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.
定義說，緊挨浮動的行框會縮短以提供浮動元素足夠的空間。但所謂的“緊挨浮動的行框”需要同時滿足垂直位置的4個條件。當浮動元素的外緣高度為零甚至為負時，行框無法滿足上述定義的條件，也就不再受浮動的影響。所以標準這兩段是因果關系，“this means”只是額外表明上述定義造成的一種特殊的結果。
當然，個人覺得，“當浮動元素沒有外緣高度，不占據空間，也就不需要行框退讓”這樣的解釋也是說的通的。而行框不縮短，在很大程度上使得浮動和絕對定位表現的很相似——內容溢出容器外會直接形成層疊。
同時浮動和絕對定位這應該是一個愚蠢的問題：如果對一個元素同時使用浮動和絕對定位的話，會怎么樣？
葵中劍
結果應該是顯而易見的，元素絕對定位。但不能因為這個問題而產生困惑，因為兩者可以共存。只是當元素絕對定位之后，**浮動的值被計算為none**。 這個問題可以被更復雜化，從而使得相當一部分人產生困惑：
也就是display:none;的情況下同時浮動和絕對定位，元素的各個值會如何？
我們知道，當元素display:none;之后，元素的position和float都不會被應用(具體可參見標準9.7節)。所以，這里需要分清的是計算值和是否被應用。這個例子里，position和float的計算值都不會受到影響(分別是absolute和left)，單單只是沒有被應用而已。
現在去掉display:none;，position和float就被應用在元素上，此時，float的值又將被計算為none。
這個問題，問的是標準9.7節，隱含的則是計算值以及值是否被應用之間區別的理解。
CSS浮動最讓人困惑的語句標準里關于浮動部分，最讓人困惑的語句莫過于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.
如果你讀過標準想必會對這句話有印象，這段話的上文是浮動行為的精確定義。我在第一次閱讀的時候，這段話給我帶來的困惑是最大的：“擦，啥玩意啊，undefined？”
造成困擾的原因有二：其一，作為非native speaker，即便自認為英語還不錯，對于這種文法錯亂加上混合了專有名詞的句子，也有點力不從心。其二，這里的undefined并不是指值，而是指標準本身。
實際上，我之后看過很多人對這段內容的翻譯，但實際上絕大部分都是硬著頭皮來的，翻譯出來的內容可能作者自己都未理解到位，詞與句都甚為牽強。這個比較無奈，于是我只好把這段話發給一個懂css的老外，讓他幫我斷句，他是這樣回復我的：
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"
這樣就清楚多了，至少我一下子就明白了，這個該死的寫出這段話的人究竟想說什么，而我再將其大概概括到最短：“垂直負邊距的浮動位置在標準里沒定義”。
沒錯，undefined指的是標準里沒有相關的定義。為什么要加這么一段蛋疼的描述呢？9.5.1節那9條精確定義了浮動行為，其中，第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.
定義中沒有例外。但例外恰恰是有的，那就垂直負邊距。而所有的瀏覽器在實現時，浮動元素都會跟著垂直負邊距移動，從而高于定義中的描述(具體參見CSS2.1 Issue 229)。為了修正標準，這句話應運而生了！不過糟糕的文法就實在不敢恭維...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111011.html
摘要：樣式聲明通過一個稱為級聯的過程來解釋和決定。級聯級聯可能是中最容易被弄錯的屬性之一。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。 你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結...
摘要：樣式聲明通過一個稱為級聯的過程來解釋和決定。級聯級聯可能是中最容易被弄錯的屬性之一。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。 你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結...
摘要：處理文件的擴展名很多的配置文件都有一個屬性，然后就像下面代碼所示有一個空字符串的值。空字符串在此是為了一些在文件時不帶文件擴展名的表達式，如或者譯者注實際就是自動添加后綴，默認是當成文件來查找路徑就這么多。 原文 Webpack—The Confusing Partsissue討論 Webpack是目前基于React和Redux開發的應用的主要打包工具。我想使用Angular 2或其他...
閱讀 1805·2021-11-22 09:34
閱讀 3093·2019-08-30 15:55
閱讀 672·2019-08-30 15:53
閱讀 2058·2019-08-30 15:52
閱讀 3004·2019-08-29 18:32
閱讀 1993·2019-08-29 17:15
閱讀 2398·2019-08-29 13:14
閱讀 3561·2019-08-28 18:05
