前言

提到浮動(dòng)，前端的小伙伴肯定都不陌生，但是隨著彈性布局等等一些更好用的標(biāo)準(zhǔn)出來(lái)后，用在布局方面少了很多，當(dāng)初我剛開(kāi)始接觸前端的時(shí)候，很習(xí)慣用浮動(dòng)來(lái)給元素改變定位，當(dāng)時(shí)還并不是很流行flexbox布局，很多布局會(huì)通過(guò)浮動(dòng)來(lái)實(shí)現(xiàn)，但是使用浮動(dòng)來(lái)布局會(huì)產(chǎn)生一些副作用，比如雖然使用浮動(dòng)可以使元素向左或向右靠齊，但會(huì)造成高度坍塌，當(dāng)時(shí)的我并不太了解其中的緣由，只是機(jī)械地從網(wǎng)上搜索到一些解決高度坍塌的代碼，到現(xiàn)在也不能算是了解的很透徹，只能算是比剛開(kāi)始做前端的時(shí)候多了解了一點(diǎn)。

脫離文檔流

在說(shuō)到浮動(dòng)的時(shí)候，很多地方都會(huì)說(shuō)，它們脫離了文檔流，那么正常情況下文檔流是怎么樣的呢？

寫(xiě)過(guò)HTML的小伙伴應(yīng)該都了解，HTML中的元素應(yīng)用的是默認(rèn)的流式布局；假設(shè)頁(yè)面上有一個(gè)div，然后還有一個(gè)span，如果我們不編寫(xiě)額外的樣式改變它們的布局方式，它們會(huì)按照默認(rèn)的規(guī)則布局，div是塊狀元素，默認(rèn)占滿(mǎn)行，即使給div設(shè)置了寬度，也是占著一行，如果有多個(gè)div會(huì)縱向一個(gè)個(gè)排布，而span是行內(nèi)元素，通常行內(nèi)元素會(huì)放置在塊容器內(nèi)部，如果有多個(gè)span會(huì)默認(rèn)橫向從左向右一個(gè)挨一個(gè)排布。

應(yīng)用了浮動(dòng)的元素就不受流式布局的控制了。比如應(yīng)用了float: left;的div，它不再會(huì)占滿(mǎn)一整行，應(yīng)用了float: right;的span，可以從右向左排布。

那么浮動(dòng)有什么特點(diǎn)，清除浮動(dòng)又是什么意思呢？

浮動(dòng)

前端有幾個(gè)較為有名的布局方式，比如圣杯布局、雙飛翼布局等等，使用float是實(shí)現(xiàn)這些布局的方式之一，當(dāng)然現(xiàn)在我們可以使用更便捷的方式來(lái)實(shí)現(xiàn)，比如flex彈性布局、grid網(wǎng)格布局等等，在這方面浮動(dòng)的應(yīng)用應(yīng)該少了很多，但其實(shí)浮動(dòng)它原本設(shè)計(jì)之初應(yīng)該就不是為了這些布局（個(gè)人觀點(diǎn)，暫未考證），這從它的名稱(chēng)上就可以窺見(jiàn)。

我們可以把文檔想象成一個(gè)水面，而浮動(dòng)元素就好比是浮在水面上的船。水波環(huán)繞船體，就像浮動(dòng)元素被其他內(nèi)容環(huán)繞一樣。比如下面這張圖：

設(shè)計(jì)float屬性主要就是實(shí)現(xiàn)這種效果，這從規(guī)范文檔中的描述就能看出：

The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

浮動(dòng)框（或 "浮動(dòng) "或 "浮動(dòng) "框）最有趣的特點(diǎn)是，內(nèi)容可以沿其側(cè)面流動(dòng)（或通過(guò) "清除 "屬性禁止流動(dòng)）。內(nèi)容可以沿著左浮動(dòng)框的右側(cè)流動(dòng)，也可以沿著右浮動(dòng)框的左側(cè)流動(dòng)。

這里流動(dòng)的內(nèi)容就可以比作流動(dòng)的水，所以我們經(jīng)常能看到使用float實(shí)現(xiàn)文字環(huán)繞效果的例子。比如規(guī)范文檔中給出的例子：

只能說(shuō)早些時(shí)候的CSS還不夠完善，不能滿(mǎn)足一些特殊的布局需求，而float恰好誤打誤撞可以滿(mǎn)足，這算是一種css hack吧。

當(dāng)使用float:left;或者float: right;聲明某個(gè)節(jié)點(diǎn)后，這個(gè)節(jié)點(diǎn)就變成了水面上的船，一個(gè)自身重量為0的船，完全浮在水面上，當(dāng)船上沒(méi)有任何東西時(shí)，它不會(huì)影響到水面，而當(dāng)我們往其中增加內(nèi)容之后，船就會(huì)向水面下沉一點(diǎn)，從而影響到水面。產(chǎn)生類(lèi)似于規(guī)范文檔中的以下描述：

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

由于浮動(dòng)框不在流中，在浮點(diǎn)框之前和之后創(chuàng)建的非定位塊框會(huì)垂直流動(dòng)，就像浮動(dòng)框不存在一樣。不過(guò)，在浮動(dòng)框旁邊創(chuàng)建的當(dāng)前和后續(xù)行方框會(huì)根據(jù)需要縮短，以便為浮動(dòng)框的margin box留出空間。

float會(huì)影響所在行的行方框，也就是line boxes。就類(lèi)似于影響到水面的面積。

清除浮動(dòng)

在使用浮動(dòng)用于布局之后，我們常常需要清除浮動(dòng)，那么清除浮動(dòng)是什么意思呢？這里可以繼續(xù)用前面浮在水面上的船來(lái)舉例子，雖然可能不算很貼切。

船在水面上是浮動(dòng)著的，隨著水流的作用會(huì)飄移，那么就有可能飄移到其他的水域，清除浮動(dòng)就類(lèi)似于阻止這艘船飄移，比如安裝一道閘門(mén)，防止船飄進(jìn)來(lái)或飄出去。通過(guò)設(shè)置特定的css屬性來(lái)清除浮動(dòng)，就類(lèi)似于這里的安裝閘門(mén)。

創(chuàng)建BFC容器

之前在《對(duì)BFC的理解》中我們有提到過(guò)，可以通過(guò)創(chuàng)建BFC容器的方式來(lái)清除浮動(dòng)，比如設(shè)置display: flow-root;，這就類(lèi)似于在一個(gè)水域的下游處安裝閘門(mén)，防止這個(gè)水域內(nèi)的船飄往下游。

假設(shè)有以下一段HTML：

在未清除浮動(dòng)前是這樣的：

可以看到，文本111占用了文本222所在div的容器，就像是船飄到了下游的水域，占了文本222的位置。

將第一個(gè)div用BFC容器包裹后（類(lèi)似于閘門(mén)的作用）：

頁(yè)面就變成了下面這個(gè)樣子：

使用clear屬性

可以看到在規(guī)范文檔中，還直接提供了一個(gè)clear屬性用于清除浮動(dòng)。

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

該屬性表示元素方框的哪些邊不得與先前的浮動(dòng)方框相鄰。"清除"屬性不考慮元素本身內(nèi)部或其他塊格式上下文中的浮動(dòng)。

創(chuàng)建BFC的方式可以類(lèi)比為上游水域在下游口安裝了閘門(mén)，使用clear屬性就可以類(lèi)比為下游水域在上游口安裝閘門(mén)，防止上游的船飄進(jìn)來(lái)。所以前面的例子中，我們也可以使用以下代碼來(lái)清除浮動(dòng)：

可以看到，最終效果和上面創(chuàng)建BFC的效果是一樣的。但實(shí)際我之前看到的解決浮動(dòng)的方案中，比較推薦的做法是由浮動(dòng)的元素這邊來(lái)處理清除，比如創(chuàng)建BFC容器，或者加在偽元素before或者after上。比如下面這段代碼：

上面的代碼中使用::after元素創(chuàng)建了一個(gè)看不見(jiàn)的塊來(lái)清除浮動(dòng)。

clear屬性可以設(shè)置多種值。

根據(jù)文檔里的描述，left值表示當(dāng)前塊不被相鄰的左浮動(dòng)框影響，right值表示當(dāng)前塊不被相鄰的右浮動(dòng)框影響，both表示同時(shí)不受兩類(lèi)浮動(dòng)框的影響。

但是規(guī)范文檔中也提示我們，使用clear屬性會(huì)產(chǎn)生副作用，使用none以外的值可能會(huì)引入間隙（clearance）。

Values other than 'none' potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.

“none”以外的值可能會(huì)引入間隙。 間隙會(huì)抑制邊距折疊，并充當(dāng)元素頂部邊距上方的間距。 它用于將元素垂直推過(guò)浮動(dòng)。

在《對(duì)BFC的理解》中，我們提到過(guò)，在BFC容器中，相鄰塊級(jí)盒子之間的垂直'margin'會(huì)折疊。這里的意思應(yīng)該就是指，設(shè)置了clear屬性為非none之后，會(huì)影響B(tài)FC容器里的垂直margin折疊。

文檔中給出了間隙的值是怎么計(jì)算得出的：

Then the amount of clearance is set to the greater of:

1. The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.

2. The amount necessary to place the top border edge of the block at its hypothetical position.

然后將間隙量設(shè)置為以下兩者中的較大值：

1.將塊的邊界邊緣與要清除的最低浮動(dòng)的底部外邊緣對(duì)齊所需的量。
2.將塊的頂部邊框邊緣放置在其假設(shè)位置所需的量。

光從描述上看，有點(diǎn)抽象，尤其是第二種計(jì)算，這里所謂的假設(shè)位置是哪里呢？第一種似乎好理解一些，就是讓兩個(gè)邊緣對(duì)齊的一個(gè)間隔的量。所以文檔中也舉了例子來(lái)配合解說(shuō)。

1. 示例1

從名稱(chēng)就可以看出，F(xiàn)是個(gè)浮動(dòng)塊高度為H，此時(shí)B1有個(gè)bottom margin值為M1，B2有個(gè)top margin值為M2，在B2未設(shè)置clear屬性之前，B1和B2之間的間距為M1和M2中的較大值，也就是產(chǎn)生了垂直margin的折疊。

假設(shè)B1的底部邊框在y=0這個(gè)位置，就如上圖所示，此時(shí)浮動(dòng)框F的頂部位置就在y=M1的位置，而B(niǎo)2的頂部邊框就在y=max(M1,M2)的位置，浮動(dòng)框F的底部位置在y=M1+H的位置。

在這個(gè)例子中，B2不在F下面，這個(gè)例子所描述的就是需要添加間隙的場(chǎng)景。也就是說(shuō)：

max(M1,M2) < M1 + H

根據(jù)文檔中描述的計(jì)算方式，這里需要計(jì)算兩次間隙量，C1和C2，然后取兩者中的較大值：C = max(C1, C2)。

第一種方法是使 B2 的頂部與 F 的底部齊平，即 y(top of B2) = M1 + H。這意味著margin不再折疊（B1和B2的間距肯定大于M1和M2），它們之間有了間隙：

此時(shí)它們的等式關(guān)系為：

F的底部 = B2的頂部邊框

M1 + H = M1 + C1 + M2

    C1 = M1 + H - M1 - M2

       = H - M2

第二中計(jì)算是保持 B2 的頂部位置，即 y(top of B2) = max(M1,M2)。也就是B2邊框在其假設(shè)位置，按照預(yù)期保持垂直margin折疊的效果。此時(shí)的等式關(guān)系就是編程下面這樣了：

max(M1, M2) = M1 + C2 + M2

         C2 = max(M1, M2) - M1 - M2

因?yàn)榧僭O(shè)了max(M1,M2) < M1 + H，因此可以得出以下不等式：

C2 = max(M1, M2) - M1 - M2 < M1 + H - M1 - M2 = H - M2

C2 < H1 - M2

又因?yàn)?code style="font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, sans-serif; padding: 0px 5px; line-height: 1.6; margin: 0px 3px; display: inline-block; overflow-x: auto; vertical-align: middle; border-radius: 3px; background-color: rgb(251, 229, 225); color: rgb(192, 52, 29); font-weight: bold;">C1 = H1 - M2，所以在這個(gè)場(chǎng)景中C2 < C1。因此間隙量C=max(C1, C2)=C1。

2. 示例2，負(fù)值間隙

在最后一個(gè)p元素未設(shè)置clear屬性之前，第一個(gè)和最后一個(gè)p元素之間的margin會(huì)折疊，最后一個(gè)p元素的頂部邊框邊緣（top border edge）會(huì)與浮動(dòng)p元素的頂部齊平。

當(dāng)我們?cè)O(shè)置clear屬性用于清除浮動(dòng)時(shí)，需要讓最后一個(gè)p元素的top border edge位于浮動(dòng)框的下面，也就是說(shuō)需要往下挪動(dòng)2em。此時(shí)必須引入間隙，相應(yīng)地，margin不再折疊，此時(shí)我們來(lái)計(jì)算間隙量：

c + m-t = 2em

c = 2em - m-t = 2em - 3em = -1em

第一種方式計(jì)算C1 = H - M2 = 2em - 3em = -1em

第二種計(jì)算方式，也就是保持 最后一個(gè)P元素 的頂部位置，C2 = max(M1, M2) - M1 - M2 = 4em - 4em - 3em = -3em

所以最后C=max(C1,C2)=-1em。

從上面兩個(gè)例子可以看出，間隙量的兩種計(jì)算方式的區(qū)別就在于，是否改變浮動(dòng)框后續(xù)元素的頂部位置。

總結(jié)

隨著彈性布局、網(wǎng)格布局等一系列新的布局方式引入后，浮動(dòng)的使用少了很多，但它仍然能實(shí)現(xiàn)特殊的網(wǎng)頁(yè)效果，因此我們還是需要對(duì)它進(jìn)行必要的了解。