浮動

最初用於在文字塊內浮動影像，float 屬性成為網頁上建立多列布局最常用的工具之一。隨著 Flexbox 和 Grid 的出現，它現在已恢復到最初的目的，正如本文所解釋的那樣。

先決條件 HTML 基礎知識（學習 HTML 簡介）以及對 CSS 工作原理的瞭解（學習 CSS 簡介）。
目標 學習如何在網頁上建立浮動功能，以及如何使用 clear 屬性和其他方法清除浮動。

浮動的背景

float 屬性是為了讓 Web 開發人員能夠實現涉及影像在文字列內浮動的佈局而引入的，文字在影像的左側或右側環繞。這就像你可能在報紙佈局中看到的那樣。

但 Web 開發人員很快意識到，你可以浮動任何東西，而不僅僅是影像，因此浮動的使用範圍更廣，例如，用於有趣的佈局效果，例如 首字母下沉。

浮動通常用於建立整個網站佈局，其中包含多列資訊浮動，以便它們並排顯示（預設行為是這些列按在原始碼中出現的順序一個接一個地顯示）。現在有更新、更好的佈局技術可用。在這種方式下使用浮動應該被視為一種 遺留技術。

在本文中，我們將只關注浮動的正確用法。

一個浮動示例

讓我們探索浮動的使用。我們將從一個圍繞元素浮動文字塊的示例開始。你可以透過在你的計算機上建立一個新的 index.html 檔案，用一個 HTML 模板 填充它，並在適當的位置插入以下程式碼來進行操作。在該部分的底部，你可以看到最終程式碼的外觀示例。

首先，我們將從一些 HTML 開始。將以下內容新增到你的 HTML 主體中，刪除之前主體中包含的任何內容

html
<h1>Float example</h1>

<div class="box">Float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet.
</p>

<p>
  Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
  orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
  ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
  ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
  a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

現在將以下 CSS 應用於你的 HTML（使用 <style> 元素或 <link> 連線到單獨的 .css 檔案 - 由你選擇）。

css
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207 232 220);
  padding: 1em;
}

如果你儲存並重新整理，你會看到與你預期的大致相同的內容：該框位於文字的上面，處於正常流程中。

浮動該框

要浮動該框，請將 float 和 margin-right 屬性新增到 .box 規則中

css
.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207 232 220);
  padding: 1em;
}

現在如果你儲存並重新整理，你會看到類似於以下內容

讓我們思考一下浮動的工作原理。設定了浮動的元素（在本例中為 <div> 元素）將從文件的正常佈局流程中移除，並貼上到其父容器的左側（在本例中為 <body>）。在正常佈局流程中，在浮動元素下方顯示的任何內容現在將環繞它，而不是填充到浮動元素右側的空間，直到浮動元素的頂部。在那裡它會停止。

將內容浮動到右側具有完全相同的效果，但相反：浮動元素將貼上到右側，內容將環繞到左側。嘗試將浮動值更改為 right 並將 margin-right 替換為 margin-left 在最後一個規則集中檢視結果。

視覺化浮動

雖然我們可以向浮動新增邊距以將文字推開，但我們不能向文字新增邊距以將其從浮動中移開。這是因為浮動元素被移除出正常流程，並且後續專案的框實際上在浮動後面執行。你可以透過對你的示例進行一些更改來看到這一點。

將 special 類新增到第一個文字段落中，該段落緊隨浮動框之後，然後在你的 CSS 中新增以下規則。這些將使我們的後續段落具有背景顏色。

css
.special {
  background-color: rgb(148 255 172);
  padding: 10px;
  color: purple;
}

為了使效果更容易看到，將浮動上的 margin-right 更改為 margin，以便在浮動周圍獲得空間。你將能夠看到段落的背景在浮動框下方執行，如以下示例所示。

我們後續元素的 行框 已被縮短，因此文字環繞浮動，但由於浮動從正常流程中移除，因此段落周圍的框仍然保持全寬。

清除浮動

我們已經看到，浮動從正常流程中移除，並且其他元素會與其一起顯示。如果我們想阻止後續元素向上移動，我們需要對其進行清除；這是使用 clear 屬性實現的。

在前面示例中的 HTML 中，將 cleared 類新增到浮動項下方的第二個段落。然後將以下內容新增到你的 CSS 中

css
.cleared {
  clear: left;
}

你應該看到第二個段落現在清除了浮動元素，不再與其一起向上移動。clear 屬性接受以下值

  • left：清除浮動到左側的專案。
  • right：清除浮動到右側的專案。
  • both：清除任何浮動專案，無論左側還是右側。

清除圍繞浮動的盒子

你現在知道如何清除浮動元素後面的內容，但讓我們看看如果你有一個高浮動和一個短段落，以及一個包裹著兩個元素的框會發生什麼。

問題

更改你的文件，以便第一個段落和浮動框一起用一個 <div> 包裹，該 <div> 具有 wrapper 類。

html
<div class="wrapper">
  <div class="box">Float1</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
</div>

在你的 CSS 中，為 .wrapper 類新增以下規則，然後重新載入頁面

css
.wrapper {
  background-color: rgb(148 255 172);
  padding: 10px;
  color: purple;
}

此外，請移除原始的 .cleared 類

css
.cleared {
  clear: left;
}

你會看到，就像我們在段落上放置背景顏色時一樣，背景顏色在浮動後面執行。

再一次，這是因為浮動已被移除出正常流程。你可能希望透過將浮動框和環繞浮動的第一個段落的文字一起包裹起來，後續內容將被清除框。但事實並非如此，如上所示。為了解決這個問題，標準方法是使用 塊級格式化上下文 (BFC) 建立 display 屬性。

display: flow-root

要解決這個問題，請使用 display 屬性的 flow-root 值。它只存在是為了在不使用駭客的情況下建立 BFC - 當你使用它時，不會有任何意外的後果。

css
.wrapper {
  background-color: rgb(148 255 172);
  padding: 10px;
  color: purple;
  display: flow-root;
}

測試您的技能！

你已經到達了本文的結尾，但你還能記住最重要的資訊嗎？在你繼續之前，你可以找到一些進一步的測試來驗證你是否保留了這些資訊 - 請參閱 測試你的技能：浮動。

總結

你現在已經瞭解了現代 Web 開發中關於浮動的所有內容。請參閱關於 遺留佈局方法 的文章，以瞭解它們是如何被使用的，這可能對你處理舊專案時有所幫助。