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

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

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

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

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

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

熟悉張鑫旭老師的人，應(yīng)該在他的博客和一些視頻教程中都有聽到上面那句話，可能和我一樣，咋一看覺得懂，然后就不以為然就過去了，然后使用在float的時候還是錯誤百出。

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

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

而所謂的環(huán)繞，那就是把兩個區(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ū)域按照原來的排版方式。

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

而由于浮動元素脫離了文檔流，如果父元素沒有指定高度或者其他元素?fù)纹?，也就出現(xiàn)了所謂的浮動元素的父元素高度塌陷。

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

    我就是
    一段文本浮動

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

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

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

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

翻譯成中文就是：

一個浮動盒會向左或向右移動，直到其外邊界挨到包含塊邊界或者另一個浮動盒的外邊界。

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

在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

翻譯成中文就是：

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

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

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

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

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


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

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

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





??????????如果沒有這樣的祖先，包含塊就是初始包含塊

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

讓我們先來看一張關(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類添加一個padding為10px的話，

.box {
    padding: 10px;
}

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

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

.text {
    display:inline-block;
}

此時的效果就是我們一開始想要的了

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

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

翻譯成中文就是：

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

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

同樣，我們通過一個小場景來了解這個當(dāng)前行的重要性。

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

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

    
Left
    
Middle
    
Right

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

然后你的心情奔潰了：

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

讓我們還原到最開始的時候的布局，去除.left和.right的浮動屬性，此時會有"三行"

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

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

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

    
Left
    
Right
    
Middle

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

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

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

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

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

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

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

此時的效果就是我們想要的了

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

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

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

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

讓我們看一段代碼：

    

    

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

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

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

.float {
    background-color:yellow;
}

效果如下：

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

脫離文檔流;

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

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