欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

前言

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

脫離文檔流

在說到浮動的時候，很多地方都會說，它們脫離了文檔流，那么正常情況下文檔流是怎么樣的呢？

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

應用了浮動的元素就不受流式布局的控制了。比如應用了float: left;的div，它不再會占滿一整行，應用了float: right;的span，可以從右向左排布。

那么浮動有什么特點，清除浮動又是什么意思呢？

浮動

前端有幾個較為有名的布局方式，比如圣杯布局、雙飛翼布局等等，使用float是實現這些布局的方式之一，當然現在我們可以使用更便捷的方式來實現，比如flex彈性布局、grid網格布局等等，在這方面浮動的應用應該少了很多，但其實浮動它原本設計之初應該就不是為了這些布局（個人觀點，暫未考證），這從它的名稱上就可以窺見。

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

設計float屬性主要就是實現這種效果，這從規范文檔中的描述就能看出：

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.

浮動框（或 "浮動 "或 "浮動 "框）最有趣的特點是，內容可以沿其側面流動（或通過 "清除 "屬性禁止流動）。內容可以沿著左浮動框的右側流動，也可以沿著右浮動框的左側流動。

這里流動的內容就可以比作流動的水，所以我們經常能看到使用float實現文字環繞效果的例子。比如規范文檔中給出的例子：

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

當使用float:left;或者float: right;聲明某個節點后，這個節點就變成了水面上的船，一個自身重量為0的船，完全浮在水面上，當船上沒有任何東西時，它不會影響到水面，而當我們往其中增加內容之后，船就會向水面下沉一點，從而影響到水面。產生類似于規范文檔中的以下描述：

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.

由于浮動框不在流中，在浮點框之前和之后創建的非定位塊框會垂直流動，就像浮動框不存在一樣。不過，在浮動框旁邊創建的當前和后續行方框會根據需要縮短，以便為浮動框的margin box留出空間。

float會影響所在行的行方框，也就是line boxes。就類似于影響到水面的面積。

清除浮動

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

船在水面上是浮動著的，隨著水流的作用會飄移，那么就有可能飄移到其他的水域，清除浮動就類似于阻止這艘船飄移，比如安裝一道閘門，防止船飄進來或飄出去。通過設置特定的css屬性來清除浮動，就類似于這里的安裝閘門。

創建BFC容器

之前在《對BFC的理解》中我們有提到過，可以通過創建BFC容器的方式來清除浮動，比如設置display: flow-root;，這就類似于在一個水域的下游處安裝閘門，防止這個水域內的船飄往下游。

假設有以下一段HTML：

在未清除浮動前是這樣的：

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

將第一個div用BFC容器包裹后（類似于閘門的作用）：

頁面就變成了下面這個樣子：

使用clear屬性

可以看到在規范文檔中，還直接提供了一個clear屬性用于清除浮動。

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.

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

創建BFC的方式可以類比為上游水域在下游口安裝了閘門，使用clear屬性就可以類比為下游水域在上游口安裝閘門，防止上游的船飄進來。所以前面的例子中，我們也可以使用以下代碼來清除浮動：

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

上面的代碼中使用::after元素創建了一個看不見的塊來清除浮動。

clear屬性可以設置多種值。

根據文檔里的描述，left值表示當前塊不被相鄰的左浮動框影響，right值表示當前塊不被相鄰的右浮動框影響，both表示同時不受兩類浮動框的影響。

但是規范文檔中也提示我們，使用clear屬性會產生副作用，使用none以外的值可能會引入間隙（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”以外的值可能會引入間隙。 間隙會抑制邊距折疊，并充當元素頂部邊距上方的間距。 它用于將元素垂直推過浮動。

在《對BFC的理解》中，我們提到過，在BFC容器中，相鄰塊級盒子之間的垂直'margin'會折疊。這里的意思應該就是指，設置了clear屬性為非none之后，會影響BFC容器里的垂直margin折疊。

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

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.

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

1.將塊的邊界邊緣與要清除的最低浮動的底部外邊緣對齊所需的量。
2.將塊的頂部邊框邊緣放置在其假設位置所需的量。

光從描述上看，有點抽象，尤其是第二種計算，這里所謂的假設位置是哪里呢？第一種似乎好理解一些，就是讓兩個邊緣對齊的一個間隔的量。所以文檔中也舉了例子來配合解說。

1. 示例1

從名稱就可以看出，F是個浮動塊高度為H，此時B1有個bottom margin值為M1，B2有個top margin值為M2，在B2未設置clear屬性之前，B1和B2之間的間距為M1和M2中的較大值，也就是產生了垂直margin的折疊。

假設B1的底部邊框在y=0這個位置，就如上圖所示，此時浮動框F的頂部位置就在y=M1的位置，而B2的頂部邊框就在y=max(M1,M2)的位置，浮動框F的底部位置在y=M1+H的位置。

在這個例子中，B2不在F下面，這個例子所描述的就是需要添加間隙的場景。也就是說：

max(M1,M2) < M1 + H

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

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

此時它們的等式關系為：

F的底部 = B2的頂部邊框

M1 + H = M1 + C1 + M2

    C1 = M1 + H - M1 - M2

       = H - M2

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

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

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

因為假設了max(M1,M2) < M1 + H，因此可以得出以下不等式：

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

C2 < H1 - M2

又因為C1 = H1 - M2，所以在這個場景中C2 < C1。因此間隙量C=max(C1, C2)=C1。

2. 示例2，負值間隙

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

當我們設置clear屬性用于清除浮動時，需要讓最后一個p元素的top border edge位于浮動框的下面，也就是說需要往下挪動2em。此時必須引入間隙，相應地，margin不再折疊，此時我們來計算間隙量：

c + m-t = 2em

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

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

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

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

從上面兩個例子可以看出，間隙量的兩種計算方式的區別就在于，是否改變浮動框后續元素的頂部位置。

總結

隨著彈性布局、網格布局等一系列新的布局方式引入后，浮動的使用少了很多，但它仍然能實現特殊的網頁效果，因此我們還是需要對它進行必要的了解。