1. 學習
  2. 核心學習模組
  3. CSS 佈局
  4. 浮動

浮動

float 屬性最初用於在文字塊內浮動影像，後來成為網頁上建立多列布局最常用的工具之一。隨著 Flexbox 和 Grid 的出現，它現在已經迴歸其最初的用途，正如本文所解釋的。

預備知識 使用 HTML 構造內容、CSS 樣式基礎、文字和字型樣式基礎，熟悉CSS 佈局基本概念。
學習成果
  • 瞭解浮動的目的——用於在文字列中浮動影像，以及諸如首字下沉和浮動嵌入資訊框等其他技術。
  • 瞭解浮動曾用於多列布局，但現在有了更好的工具，這種情況已不再適用。
  • 使用 float 屬性建立浮動。
  • 使用 clear 和 display: flow-root 值清除浮動。

浮動的背景

引入 float 屬性是為了讓 Web 開發者能夠實現一種佈局，即影像浮動在文字列中，文字環繞其左側或右側。這就像報紙版面中常見的那種佈局。

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

浮動曾常用於建立整個網站佈局，其中包含多列資訊浮動在一起（預設行為是列會按照它們在原始碼中出現的順序堆疊在彼此下方）。現在有更新、更好的佈局技術可用。以這種方式使用浮動應被視為一種遺留技術。

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

浮動示例

讓我們來探索浮動的使用。我們將從一個示例開始，其中涉及圍繞一個元素浮動一個文字塊。你可以透過在電腦上建立一個新的 index.html 檔案，用一個 HTML 模板填充它，並將以下程式碼插入到適當的位置來跟著學習。在本節底部，你可以看到最終程式碼的即時示例。

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

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 "Helvetica",
    "Arial",
    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：清除所有浮動的專案，無論是左浮動還是右浮動。

清除浮動周圍的盒子

現在你知道如何清除浮動元素後面的內容，但讓我們看看如果你有一個高大的浮動元素和一個短小的段落，並且一個盒子包含了兩個元素時會發生什麼。

問題

修改您的文件，使第一個段落和浮動盒子共同用一個帶有 wrapper 類的 <div> 包裹。

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;
}

你會看到，就像我們在段落上新增背景顏色的例子一樣，背景顏色會執行在浮動元素的後面。

這再次是因為浮動元素已從正常流中取出。您可能認為，透過將浮動框和圍繞浮動框的第一個段落的文字一起包裹起來，後續內容將清除該框。但事實並非如此。

display: flow-root

解決這個問題的方法是使用 display 屬性的 flow-root 值。這個值只為解決這個特定問題而存在，無需使用任何技巧——使用它不會帶來任何意外的後果。

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

總結

這就是您需要了解的關於浮動的所有內容。在下一篇文章中，我們將為您提供一些測試，您可以用來檢查自己對所有這些資訊的理解和掌握程度。

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者 在 修改。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題
© . Content available under a Creative Commons license.