清除浮動的四種方式及其原理理解

ThinkMore發表於2017-10-18

本文介紹了四種清除浮動的方法，並嘗試解釋其原理。在理解了各種清除浮動的原理之後，你會發現，很多清除浮動的方法本質上其實是一樣的。掌握這些原理，相信你可以根據場景和需求，靈活運用原則發展出不同的清除浮動的方法，而不再死記或拘泥於文中提到的方法。

一、為什麼要清除浮動

在講清除浮動的方法之前，我們先來了解一下為什麼要清除浮動，清除浮動的目的是什麼，即，要解決什麼樣的問題。來看一個浮動的例子(略去了文字內容)：

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">...</div>
</div>
<div class="bottomDiv">...</div>複製程式碼

其樣式為：

.topDiv {
    width: 500px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}複製程式碼

在chrome中渲染的效果如下圖所示：

浮動效果
浮動效果

這肯定不是我們想要的渲染效果，它可能存在如下問題：

  1. 文字圍繞浮動元素排版，但我們可能希望文字（.textDiv）排列在浮動元素下方，或者，我們並不希望.textDiv兩邊有浮動元素存在。
  2. 浮動元素排版超出了其父級元素（.topDiv），父元素的高度出現了塌縮，若沒有文字高度的支撐，不考慮邊框，父級元素高度會塌縮成零。
  3. 浮動元素甚至影響到了其父元素的兄弟元素（.bottomDiv）排版。因為浮動元素脫離了文件流，.bottomDiv在計算元素位置的時候會忽略其影響，緊接著上一個元素的位置繼續排列。

解決第一個問題，需要清除.textDiv周圍的浮動，而解決第二個問題，因為父元素的兄弟元素位置只受父元素位置的影響，就需要一種方法將父級元素的高度撐起來，將浮動元素包裹在其中，避免浮動元素影響父元素外部的元素排列。

接下來開始介紹清除浮動的方法。

二、清除浮動的方法

1. 利用clear樣式

還是開篇的例子，我們給需要清除浮動的元素新增如下樣式：

.textDiv {
    color: blue;
    border: 2px solid blue;

    clear: left;
}複製程式碼

清除浮動後的渲染效果如下：

解釋一下：

通過上面的樣式，.textDiv告訴瀏覽器，我的左邊不允許有浮動的元素存在，請清除掉我左邊的浮動元素。然而，因為浮動元素（.floatDiv）位置已經確定，瀏覽器在計算.textDiv的位置時，為滿足其需求，將.textDiv渲染在浮動元素下方，保證了.textDiv左邊沒有浮動元素。同時可以看出，父元素的高度也被撐起來了，其兄弟元素的渲染也不再受到浮動的影響，這是因為.textDiv仍然在文件流中，它必須在父元素的邊界內，父元素只有增加其高度才能達到此目的，可以說是一個意外收穫。(clear的值為both也有相同的效果，通俗理解就是，哪邊不允許有浮動元素，clear就是對應方向的值，兩邊都不允許就是both)

但是，如果我們把HTML中的.floatDiv和.textDiv交換一下位置呢？

<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>複製程式碼

無論.textDiv是否應用清除浮動，情況都是下面的樣子：

.textDiv的位置先確定了，於是浮動元素就緊接著.textDiv下方渲染在父元素的左側。然而，父元素的高度並沒有被撐起來，沒有將浮動影響“內化”，導致浮動影響到了接下來的元素排版。

看來，為達到撐起父元素高度的目的，使用clear清除浮動的方法還是有適用範圍的。我們需要更加通用和可靠的方法。

（這裡澄清一下，單從元素清除浮動的角度，clear完全已經達到了目的，它已經使得.textDiv特定的方向上不再有浮動元素，清除浮動其實僅僅針對需要清除浮動的元素本身而言，只關注自身需求是否達到，和外界沒有什麼關係，它不關注浮動是否超出父元素，以及浮動是否影響到後續元素排列。我們只是利用了浮動的一些特性達到某些目的，但這不是清除浮動關心的問題，只不過，相對於清除浮動，我們可能更加關心這些特效能為我們做些什麼而已。我的理解是，清除浮動和撐起父元素高度其實是兩個不同的問題，在這裡，可以簡單地理解為工具和目的之間的關係，接下來要討論的兩個方法都是在利用清除浮動這個工具在解決問題，它並不是清除浮動這個工具本身。不過，我們經常將兩者混為一談。sorry，有點囉嗦，看不懂就是我沒表達清楚，跳過即可。。。）

2. 父元素結束標籤之前插入清除浮動的塊級元素

HTML結構如下，在有浮動的父級元素的末尾插入了一個沒有內容的塊級元素div：

<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
    <div class="blankDiv"></div>
</div>
<div class="bottomDiv">...</div>複製程式碼

應用樣式：

.topDiv {
    width: 500px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}
// 區別在這裡
.blankDiv {
    clear: both; // or left
}複製程式碼

渲染效果如下：

原理無需多講，和第一個例子裡.textDiv應用clear清除浮動，撐起父級元素高度的原理完全一樣。這裡強調一點，即，在父級元素末尾新增的元素必須是一個塊級元素，否則無法撐起父級元素高度。

3. 利用偽元素（clearfix）

HTML結構如下，為了慣例相符，在.topDiv的div上再新增一個clearfix類：

<div class="topDiv clearfix">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>複製程式碼

樣式應用如下：

// 省略基本的樣式
// 區別在這裡
.clearfix:after {
    content: '.';
    height: 0;
    display: block;
    clear: both;
}複製程式碼

該樣式在clearfix，即父級元素的最後，新增了一個:after偽元素，通過清除偽元素的浮動，達到撐起父元素高度的目的。注意到該偽元素的display值為block，即，它是一個不可見的塊級元素（有的地方使用table，因為table也是一個塊級元素）。你可能已經意識到，這也只不過是前一種清除浮動方法（新增空白div）的另一種變形，其底層邏輯也是完全一樣的。前面的三種方法，其本質上是一樣的。

4. 利用overflow清除浮動

首先直觀地看看，overflow是如何清除浮動的。

HTML結構如下：

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">...</div>
</div>
<div class="bottomDiv">...</div>複製程式碼

樣式應用如下：

.topDiv {
    width: 500px;
    padding: 4px;
    border: 2px solid black;

    // 區別在這裡
    overflow: auto;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
    clear: both;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}複製程式碼

不應用上面標識出來的CSS時，渲染結果和本文開始的第一個圖形效果相同，應用CSS後的渲染效果如下：

僅僅只在父級元素上新增了一個值為auto的overflow屬性，父元素的高度立即被撐起，將浮動元素包裹在內。看起來，浮動被清除了，浮動不再會影響到後續元素的渲染（嚴格講，這和清除浮動沒有一點關係，因為不存在哪個元素的浮動被清除，不糾結這個問題）。其實，這裡的overflow值，還可以是除了"visible"之外的任何有效值，它們都能達到撐起父元素高度，清除浮動的目的。不過，有的值可能會帶來副作用，比如，scroll值會導致滾動條始終可見，hidden會使得超出邊框部分不可見等。那它們是如何做到浮動清除的呢？

要講清楚這個解決方案的原理，有一個概念始終是繞不過去，那就是塊格式化上下文(BFC),然而這又是一個非常抽象的概念，如果要清楚地把這個概念講出來，恐怕需要非常大的篇幅，這裡僅提及和理解該問題相關的內容。

這是從MDN上摘下來的BFC定義：

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

翻譯過來就是：塊級格式化上下文是CSS視覺化渲染的一部分。它是一塊區域，規定了內部塊盒的渲染方式，以及浮動相互之間的影響關係。

塊格式化上下文（BFC）有下面幾個特點：

  1. BFC是就像一道屏障，隔離出了BFC內部和外部，內部和外部區域的渲染相互之間不影響。BFC有自己的一套內部子元素渲染的規則，不影響外部渲染，也不受外部渲染影響。
  2. BFC的區域不會和外部浮動盒子的外邊距區域發生疊加。也就是說，外部任何浮動元素區域和BFC區域是涇渭分明的，不可能重疊。
  3. BFC在計算高度的時候，內部浮動元素的高度也要計算在內。也就是說，即使BFC區域內只有一個浮動元素，BFC的高度也不會發生塌縮，高度是大於等於浮動元素的高度的。
  4. HTML結構中，當構建BFC區域的元素緊接著一個浮動盒子時，即，是該浮動盒子的兄弟節點，BFC區域會首先嚐試在浮動盒子的旁邊渲染，但若寬度不夠，就在浮動元素的下方渲染。[看這裡]

有了這幾點，就可以嘗試解釋為什麼overflow（值不為visible）可以清除浮動了。

當元素設定了overflow樣式，且值不為visible時，該元素就建構了一個BFC(哪些情況下，元素可以建構出BFC，可以看檢視CSS文件對BFC的定義)。在我們的例子中，.topDiv因設定了值為auto的overflow樣式，所以該元素建構出一個BFC，按照第三個特點，BFC的高度是要包括浮動元素的，所以.topDiv的高度被撐起來，達到了清除浮動影響的目的。(至於為什麼值為visible的overflow不能建構BFC，這個答案給了一個解釋)

其實，這裡overflow的作用就是為了構建一個BFC區域，讓內部浮動的影響都得以“內化”。如果你看了BFC的定義，你會發現，構建一個BFC區域的方法有很多種，overflow只是其中的一種，那在這裡，我們是否也可以利用其它的方式構建BFC，且同樣能達到清除浮動的目的呢？

BFC定義中說，inline-block同樣也能構建BFC，那我們就用該樣式來試試：

.topDiv {
    width: 500px;
    padding: 4px;
    border: 2px solid black;

    // 區別在這裡
    display: inline-block;
}
// 其他樣式相同，省略複製程式碼

渲染效果如下：

效果完全一樣！只要我們理解了原理，就可以靈活演變出不同的清除浮動的方法，而不必死記某種手段。

當然，要說明的是，在實際專案中選擇採用哪種方式構建BFC是要具體問題具體分析的，因為要考慮到選用的樣式自身的作用和影響。這個例子中，選用inline-block和選用overflow效果完全一樣，沒有看出有什麼副作用，但不代表在其他專案中一樣能行得通。甚至對overflow值的選擇也要考慮其表現和影響。在各種構建BFC的方式中，overflow方式可能是外部影響更可控的一種，我猜想這也許就是為什麼普遍採用overflow來清除浮動的原因吧。

到這裡，我要分享的清除浮動的方法已經講完了。其實，如果在不同的使用場景下，對這幾個方法進行拆分組合(其實是對底層原理的拆分組合)，還可以實現其他形式不同的清除浮動的方法，最重要的還是對底層原理的把握。知其然，亦知其所以然才是最有效的學習方式。

下面是文中涉及的連結彙總：

  1. MDN對BFC的定義
  2. CSS文件對BFC的定義和解釋，BFC如何建立，BFC內部渲染規則
  3. 為什麼overflow的值為visible時，無法清除浮動，而其他值可以，Stack Overflow上的一個回答
  4. BFC緊跟浮動元素時如何渲染

水平有限，文章中難免會出現不準確，甚至錯誤的地方，期待你的寶貴意見！

相關文章