摘要：而在文檔流中，如果浮動(dòng)元素和跟隨元素都是元素，它們兩在默認(rèn)情況下都將占據(jù)一行。而由于浮動(dòng)元素脫離了文檔流，如果父元素沒(méi)有指定高度或者其他元素?fù)纹穑簿统霈F(xiàn)了所謂的浮動(dòng)元素的父元素高度塌陷。

由于從工作到現(xiàn)在，我的主要工作都是寫JavaScript，幾乎沒(méi)怎么碰CSS，通常都是別人寫好界面，然后我來(lái)開(kāi)發(fā)JavaScript邏輯代碼，這導(dǎo)致了嚴(yán)重的偏科，CSS弱得很，所以我決定要重新學(xué)習(xí)CSS，從打好CSS2的基礎(chǔ)開(kāi)始。最近我開(kāi)始在看一本關(guān)于CSS的書(shū)，這本書(shū)叫《CSS世界》，是張?chǎng)涡襁@個(gè)CSS大神寫的，質(zhì)量十分有保障。

這本書(shū)幾乎完全顛覆了我對(duì)于CSS的認(rèn)知，幾乎等于重塑我的CSS世界觀。

子曰：學(xué)而不思則罔，思而不學(xué)則殆。

所以我決定把從這本書(shū)學(xué)習(xí)到的知識(shí)結(jié)合我看到的一些文檔來(lái)總結(jié)一下，以便以后復(fù)習(xí)使用，所以文章中的見(jiàn)解也有可能是錯(cuò)的，不追求完全正確，而是希望能夠作為方法論來(lái)指導(dǎo)之后的CSS開(kāi)發(fā)。如有錯(cuò)誤，請(qǐng)諸君指正。

浮動(dòng)的本質(zhì)就是為了實(shí)現(xiàn)文字環(huán)繞效果   ——《CSS世界》第六章 流的破壞和保護(hù)

熟悉張?chǎng)涡窭蠋煹娜耍瑧?yīng)該在他的博客和一些視頻教程中都有聽(tīng)到上面那句話，可能和我一樣，咋一看覺(jué)得懂，然后就不以為然就過(guò)去了，然后使用在float的時(shí)候還是錯(cuò)誤百出。

撇開(kāi)我們是前端開(kāi)發(fā)者這個(gè)身份，讓我們作為一個(gè)普通用戶的角度來(lái)思考有哪些場(chǎng)景我們會(huì)用到文字環(huán)繞效果。相信很多人都是使用過(guò)Word這個(gè)軟件，在我們編輯圖文信息的時(shí)候，希望文字可以圍繞圖片來(lái)排列，也就是文字環(huán)繞，也就是從圖1變?yōu)閳D2：

還是一樣，讓我們作為一個(gè)普通用戶來(lái)思考如何實(shí)現(xiàn)這一效果。為了方便，我在這里定義一些詞匯，將文本、段落稱之為跟隨內(nèi)容，將圖片等需要被環(huán)繞的稱之為目標(biāo)元素。
首先然后我們將這兩者簡(jiǎn)化一下，分成兩個(gè)區(qū)塊，如圖：

而所謂的環(huán)繞，那就是把兩個(gè)區(qū)塊重疊在一起，目標(biāo)元素懸浮于重疊區(qū)上面，而且重疊區(qū)不能有跟隨內(nèi)容的內(nèi)容，如圖：

所以要使得跟隨內(nèi)容能夠環(huán)繞目標(biāo)元素我們需要做到以下步驟：

使跟隨內(nèi)容的頂部能夠上升到與目標(biāo)元素頂部同一水平線上；

跟隨內(nèi)容與目標(biāo)元素的重疊區(qū)域不能有文字，不重疊區(qū)域按照原來(lái)的排版方式。

浮動(dòng)最初是為了實(shí)現(xiàn)文字環(huán)繞效果，經(jīng)過(guò)上面的討論我們意識(shí)到了需要讓浮動(dòng)元素和跟隨元素的頂部上升到同一水平線上。而在文檔流中，如果浮動(dòng)元素和跟隨元素都是Div元素，它們兩在默認(rèn)情況下都將占據(jù)一行。所以我們要讓浮動(dòng)元素脫離文檔流，這個(gè)時(shí)候跟隨元素才能根據(jù)文檔流的要求進(jìn)行上移，從而達(dá)到視覺(jué)上的重疊效果。

而由于浮動(dòng)元素脫離了文檔流，如果父元素沒(méi)有指定高度或者其他元素?fù)纹穑簿统霈F(xiàn)了所謂的浮動(dòng)元素的父元素高度塌陷。

在進(jìn)行原理分析前，讓我們先來(lái)看一段代碼，并想象它的渲染結(jié)果

    我就是
    一段文本浮動(dòng)

此時(shí)，你腦海里想象的結(jié)果可能如下圖：

但實(shí)際運(yùn)行效果卻是這樣的：

為什么會(huì)出現(xiàn)這種情況呢？讓我們從CSS的標(biāo)準(zhǔn)中找尋答案。W3C的CSS標(biāo)準(zhǔn)文檔關(guān)于浮動(dòng)的描述中有這樣一段話：

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float

翻譯成中文就是：

一個(gè)浮動(dòng)盒會(huì)向左或向右移動(dòng)，直到其外邊界挨到包含塊邊界或者另一個(gè)浮動(dòng)盒的外邊界。

OK,先撇開(kāi)有多個(gè)浮動(dòng)元素的情況，讓我們只考慮一個(gè)浮動(dòng)元素的情況。注意到上述引用文本中的高亮詞沒(méi)有？包含塊(containing block)，沒(méi)錯(cuò)，之所以剛才我們對(duì)代碼運(yùn)行的渲染效果的想象與實(shí)際瀏覽器運(yùn)行的效果產(chǎn)生偏差，就是因?yàn)槲覀儧](méi)有意識(shí)到包含塊(containing block),或者識(shí)別錯(cuò)了浮動(dòng)元素的包含塊，而這個(gè)包含塊就是元素浮動(dòng)的參考位置!

在W3C的CSS標(biāo)準(zhǔn)文檔中關(guān)于包含塊的描述中有這樣一段話：

The position and size of an element"s box(es) are sometimes calculated relative to a certain rectangle,called the containing block of the element

翻譯成中文就是：

元素（生成的）盒的位置和大小有時(shí)是根據(jù)一個(gè)特定矩形計(jì)算的，叫做該元素的包含塊（containing block）

關(guān)于如何確定一個(gè)元素的包含塊，標(biāo)準(zhǔn)也給出了定義，由于英文的較長(zhǎng)，閱讀起來(lái)比較吃力，在此我放一段中文的定義：

根元素所在的包含塊是一個(gè)被稱為初始包含塊的矩形。對(duì)于連續(xù)媒體，尺寸取自視口的尺寸，并且被固定在畫布開(kāi)始的位置；對(duì)于分頁(yè)媒體就是頁(yè)區(qū)（page area）。初始包含塊的"direction"屬性與根元素的相同

對(duì)于其它元素，如果該元素的position是"relative"或者"static"，包含塊由其最近的塊容器祖先盒的內(nèi)容邊界(the content edge )形成

如果元素具有"position: fixed"，包含塊由連續(xù)媒體的視口或者分頁(yè)媒體的頁(yè)區(qū)建立


如果元素具有"position: absolute"，包含塊由最近的"position"為"absolute"，"relative"或者"fixed"的祖先建立，按照如下方式：

如果該祖先是一個(gè)行內(nèi)元素，包含塊就是環(huán)繞著為該元素生成的第一個(gè)和最后一個(gè)行內(nèi)盒的內(nèi)邊距框的邊界框（bounding box）。在CSS 2.1中，如果該行內(nèi)元素被跨行分割了，那么包含塊是未定義的

否則，包含塊由該祖先的內(nèi)邊距邊界形成





??????????如果沒(méi)有這樣的祖先，包含塊就是初始包含塊

根據(jù)上面關(guān)于包含塊的定義，我們可以發(fā)現(xiàn).float元素符合第2條，那么它的包容塊就是.box這個(gè)div的內(nèi)容邊界，注意是內(nèi)容邊界(the content edge )，而不是整個(gè)盒子，所以不包含padding、border、margin。

讓我們先來(lái)看一張關(guān)于盒模型圖：

W3C的CSS規(guī)范關(guān)于content edge的定義是：

The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element"s rendered content The four content edges define the box"s content box.

翻譯成中文就是：

內(nèi)容邊界環(huán)繞著盒的width和height指出的矩形，通常取決于元素的呈現(xiàn)（rendered）內(nèi)容。4條內(nèi)容邊界定義了盒的內(nèi)容框（content box）

所以如果我們給.box類添加一個(gè)padding為10px的話，

.box {
    padding: 10px;
}

浮動(dòng)元素由于是貼著包容塊在浮動(dòng)，而此時(shí)的包容塊僅僅是.box元素的內(nèi)容區(qū)，不包含padding,所以就出現(xiàn)了，浮動(dòng)元素與.box元素盒子之間的間距，效果如下：

OK，那如何通過(guò)只調(diào)整CSS的方式就達(dá)到我們一開(kāi)始腦海里想象的渲染效果呢？答案就是讓.textspan元素成為.float元素的包含塊就行了，讓inline level element變成block level element,只需添加一句dispaly:inline-block或dispaly:block即可，這里我們還想保持.text元素的內(nèi)聯(lián)性，所以我們添加:

.text {
    display:inline-block;
}

此時(shí)的效果就是我們一開(kāi)始想要的了

W3C的CSS標(biāo)準(zhǔn)規(guī)范中關(guān)于浮動(dòng)的定義，一開(kāi)頭就有這么一句：

A float is a box that is shifted to the left or right on the current line.

翻譯成中文就是：

浮動(dòng)（盒）就是一個(gè)在當(dāng)前行向左或向右移動(dòng)的盒。

大家注意高亮詞當(dāng)前行(the current line),一定要理解這個(gè)當(dāng)前行，如果說(shuō)包含塊(containing block)決定了浮動(dòng)元素浮動(dòng)的范圍的話，那這個(gè)當(dāng)前行(the current line)就決定了在浮動(dòng)范圍的哪個(gè)垂直位置進(jìn)行浮動(dòng)。

同樣，我們通過(guò)一個(gè)小場(chǎng)景來(lái)了解這個(gè)當(dāng)前行的重要性。

想象一下，你接到了一個(gè)任務(wù)，要求實(shí)現(xiàn)一個(gè)三列布局，無(wú)論左右兩列的寬度怎么變化，中間列的寬度都要自適應(yīng)，效果大概如下圖（為了突出效果，給三列都添加了背景顏色）:

聰明的你可能已經(jīng)想到了辦法，讓左右兩列浮動(dòng)，中間列的左右margin值為auto，這樣就可以實(shí)現(xiàn)中間列自適應(yīng)了。沒(méi)錯(cuò)你覺(jué)得十分機(jī)智，然后按照設(shè)計(jì)圖的視覺(jué)你從左到右寫了三個(gè)div：

    
Left
    
Middle
    
Right

然而你運(yùn)行代碼，你看到的效果卻是這樣的：

然后你的心情奔潰了：

遇事不慌，首先讓我們分析一下，浮動(dòng)元素.right的包含塊是什么？沒(méi)錯(cuò)，就是.container的內(nèi)容邊界(content edge),所以雖然有點(diǎn)差錯(cuò)，但好歹還在里面浮動(dòng)著。
那接下來(lái)就是確定當(dāng)前行(current line)了。

讓我們還原到最開(kāi)始的時(shí)候的布局，去除.left和.right的浮動(dòng)屬性，此時(shí)會(huì)有"三行"

首先我們讓.left浮動(dòng)起來(lái)，在.container的內(nèi)容邊界范圍中、“第一行”中向左浮動(dòng)，由于其脫離了文檔流，.middle開(kāi)始上移到“第一行”。
此時(shí)由于.middle的上移，.right元素也向上移動(dòng)到了“第二行”，然后讓它浮動(dòng)，此時(shí).right的浮動(dòng)范圍是.container的內(nèi)容邊界范圍中,而浮動(dòng)的當(dāng)前行是“第二行”，所以就出現(xiàn)了.right元素掉下去浮動(dòng)的效果了，因?yàn)樗摹爱?dāng)前行”就是“第二行”，它其實(shí)沒(méi)有掉下去過(guò)!

那怎么樣才能解決，很簡(jiǎn)單，讓.left和.right“同一行”不就好了。什么意思呢？

.left浮動(dòng)的當(dāng)前行是“第一行”，然后由于脫離了文檔流，后續(xù)的元素會(huì)往上移動(dòng)一行，那我們讓.right緊跟在.left之后不就行了，.left浮動(dòng)后，.right就會(huì)到“第一行”，此時(shí)浮動(dòng)不就到了“第一行”的右邊了么。然后由于.right也脫離文檔流，.middle也上移到了“第一行”，具體代碼如下：

    
Left
    
Right
    
Middle

然后就是運(yùn)行之后就是我們一開(kāi)始想要的效果了：

看到這里相信你已經(jīng)理解了許多，讓我們通過(guò)相關(guān)下面這段代碼的運(yùn)行效果，來(lái)檢驗(yàn)?zāi)闶欠裾娴睦斫饬税桑崾荆簶?biāo)題中的文字已經(jīng)超出了.title的寬度了

我就是一個(gè)三級(jí)標(biāo)題更多

如果你能腦補(bǔ)出下圖的效果，說(shuō)明你已經(jīng)懂了，如果還不能，請(qǐng)回到前文繼續(xù)閱讀。

讓我們用上面用過(guò)的套路來(lái)分析這一現(xiàn)象，首先確認(rèn).more元素的包含塊為.title元素的內(nèi)容邊界，然后由于內(nèi)容過(guò)長(zhǎng)，寬度不夠，此時(shí)就變?yōu)榱藘尚酗@示，而.more元素就在“第二行”，所以它的當(dāng)前行就是“第二行”，添加浮動(dòng)屬性之后，在.title元素的內(nèi)容邊界范圍內(nèi)的“第二行”向右浮動(dòng)，就形成了我們看到的樣子。

如果希望無(wú)論標(biāo)題內(nèi)容無(wú)論多長(zhǎng)，.more元素都要固定浮動(dòng)在右邊，那么只需要將.more元素的代碼放置帶.title元素的最前方即可，也就是：

更多我就是一個(gè)三級(jí)標(biāo)題

此時(shí)的效果就是我們想要的了

這一部分其實(shí)是浮動(dòng)的本質(zhì)，卻經(jīng)常被我們所遺忘，主要是因?yàn)檫@個(gè)文字環(huán)繞的效果主要影響的是浮動(dòng)元素的跟隨元素。

由于這一部分規(guī)范中的定義比較晦澀，所以以下內(nèi)容是我在閱讀《CSS世界》結(jié)合自身的理解來(lái)闡述的，如果你希望查看規(guī)范的原文，可以訪問(wèn)這個(gè)鏈接。

首先由于浮動(dòng)，浮動(dòng)元素和跟隨元素出現(xiàn)了一定的重疊區(qū)，這一點(diǎn)大家都知道了，而要想內(nèi)容環(huán)繞，則重疊區(qū)不能有內(nèi)容，注意是內(nèi)容，文本、svg、圖片等替換元素都被視為“內(nèi)容”，基本都是inline或line-block的元素。

而無(wú)論是inline還是inline-block元素，都會(huì)產(chǎn)生“行框盒子”，在重疊區(qū)中不允許出現(xiàn)“內(nèi)容”，也就可以轉(zhuǎn)化成重疊區(qū)的“行框盒子”需要“貼在”浮動(dòng)元素浮動(dòng)方向的反方向的側(cè)邊即可，就是說(shuō)如果一個(gè)元素向左浮動(dòng)，則跟隨元素在重疊區(qū)的“行框盒子”需要“貼在”浮動(dòng)元素的右側(cè)邊，反之亦然。

讓我們看一段代碼：

    

    

        我是匿名內(nèi)聯(lián)盒子的文本
        ，而我是內(nèi)聯(lián)盒子的文本，如果文本很長(zhǎng)，那就會(huì)出現(xiàn)balabalabala的效果。
        
        充點(diǎn)字?jǐn)?shù)哈兄弟。
    

我們用藍(lán)色背景高亮文本的第一行，就可以看得出來(lái)“行框盒子”卡浮動(dòng)元素側(cè)邊的效果了，然后注意，重疊區(qū)是不能渲染“內(nèi)容”，背景顏色不屬于“內(nèi)容”，所以我們可以看到綠色背景色連重疊區(qū)也鋪滿。

這時(shí)候可能有大兄弟要問(wèn)，那重疊區(qū)到底是浮動(dòng)元素在上還是跟隨元素在上啊？答案就是：浮動(dòng)元素在上。
讓我們加一段代碼驗(yàn)證以下：

.float {
    background-color:yellow;
}

效果如下：

當(dāng)一個(gè)元素要進(jìn)行浮動(dòng)時(shí)，需要以下步驟：

脫離文檔流;

在“包含塊”范圍內(nèi)及“當(dāng)前行”上根據(jù)浮動(dòng)方向進(jìn)行浮動(dòng)；

受浮動(dòng)影響的元素在與浮動(dòng)元素的重疊區(qū)中不允許渲染“內(nèi)容”，受浮動(dòng)影響的元素內(nèi)的行框盒子進(jìn)行“卡位”，實(shí)現(xiàn)文字環(huán)繞；