在現代網頁排版技術中，Flexbox 與 Grid 系統無疑是主流的佈局工具。然而，在它們普及之前，CSS 的 float（浮動）屬性扮演了網頁佈局的基石角色。float 最初的設計目標是為了實現文字環繞圖片image的「文繞圖」效果，如同報紙或雜誌的排版。隨著網頁設計的發展，開發者們巧妙地運用它來建構多欄式column佈局，撐起了整個page的結構。
儘管 float 在複雜佈局上的應用已逐漸被新技術取代，但徹底理解其運作原理、特性與相關問題，對於維護舊有專案、處理特定排版需求（如 Email 模板）以及深入瞭解 CSS 渲染機制仍然至關重要。本文將從基礎概念到進階互動，為您提供一份關於 float 的完整指南。
一、什麼是 CSS Float？
float 是一個 CSS 屬性，它指定一個元素element（通常是區塊級元素）應該脫離正常的文檔流（Normal Flow），並沿著其父容器的左側或右側放置。當一個元素浮動後，其後的內容（尤其是行內元素，如文字）將會環繞它。
屬性值
float 屬性主要包含以下幾個值：
| 屬性值 | 描述 | CSS 版本 |
|---|---|---|
| left | 元素向其容器的左側浮動。 | CSS1 |
| right | 元素向其容器的右側浮動，可寫作float:right。 | CSS1 |
| none | 預設值。元素不浮動，保持在正常文檔流中。 | CSS1 |
| inline-start | 邏輯屬性值。在 ltr（由左至右）書寫模式下等同於 left，在 rtl（由右至左）模式下等同於 right。 | CSS Logical Properties |
| inline-end | 邏輯屬性值。在 ltr 書寫模式下等同於 right，在 rtl 模式下等同於 left。 | CSS Logical Properties |
| inherit | 繼承其父元素的 float 屬性值。 | CSS2 |
二、浮動元素的關鍵特性
當一個元素被設定了 float（值不為 none）後，它會獲得一些獨特的、有別於一般元素的行為特性。理解這些特性是掌握浮動佈局的關鍵。
脫離普通流 (Out of Normal Flow)
這是 float 最核心的特性。一個浮動元素會被「提起」，脫離它原本在 HTML 結構中應佔據的線性位置。它不再佔據文檔流中的空間，就像它不存在一樣。
父層容器高度塌陷 (Parent Container Height Collapse)
由於浮動元素脫離了普通流，父容器會無法「感知」到其內部浮動元素的高度。如果父容器中只包含浮動elements，或者沒有其他非浮動的內容來撐開高度（例如設定background-color的父容器），那麼這個父容器的高度將會「塌陷」為 0。這是使用 float 佈局時最常見的問題。
顯示模式轉變 (Display Mode Transformation)
不論元素原本的 display 屬性是什麼，一旦設定為浮動，其 display 的計算值（Computed Value）會被強制轉換為類似 block 的行為模式。這意味著：
- 原本的 inline 元素（如 <span>）在浮動後，可以設定 width、height與line-height。
- 原本的 inline-block 元素浮動後，行為與浮動的 block 元素無異。此規則也適用於list項目。
- 這個特性讓 float 在佈局上更加靈活。
環繞效果與排列規則
- 文字環繞：如下圖所示，浮動元素之後的行內元素（Line Box）會被縮短，以騰出空間給浮動元素，從而形成圍繞著浮動元素的text環繞效果。
- 水平排列：如果多個元素朝同一個方向浮動（例如，多個 float: left），它們會水平並排，直到碰到父容器的邊界。如果空間不足，後續的浮動元素會自動換行，並緊貼著上一行的浮動元素繼續排列。
三、清除浮動 (Clearing Floats)
為瞭解決因浮動元素脫離文檔流而引發的「高度塌陷」和後續元素佈局錯亂等問題，我們需要「清除浮動」。清除浮動的本質是告訴某個元素，它的頂部邊緣不應該與其前方的浮動元素相鄰，應位於其bottom。這是通過 clear 屬性來實現的。
clear 屬性只對區塊級元素有效，其值包括：
- clear: left;：清除左側浮動，即該元素的頂部必須位於任何前面左浮動元素的底部之下。
- clear: right;：清除右側浮動。
- clear: both;：同時清除左側和右側的浮動。這是最常用、最保險的做法，尤其在某些地方的複雜佈局中。
- clear: none;：預設值，允許兩側都有浮動元素。
清除浮動的常用方法
空標籤法
在所有浮動元素的末尾，父容器的閉合標籤之前，添加一個空的區塊元素（如 <div>），並為其設定 clear: both;。下面是一些範例code：
<div class="parent">
<div style="float: left;">...</div>
<div style="float: left;"><p>lorem ipsum dolor sit amet</p></div>
<div style="clear: both;"></div>
</div>
- 優點：簡單直觀，兼容性好。
- 缺點：增加了無語意的 HTML 標籤，不夠優雅。
偽元素法 (Modern Best Practice)
利用 CSS 的 ::after 偽元素為父容器添加一個看不見的元素來清除浮動。這是目前最推薦的方法，有許多經典的examples。
.clearfix::after {
content: ""; /* 偽元素必須有 content 屬性 */
display: block; /* 將偽元素轉換為區塊級 */
clear: both; /* 清除浮動 */
height: 0; /* 確保不佔據額外高度 */
visibility: hidden; /* 確保不可見 */
}
.clearfix {
/* 為了兼容舊版 IE */
*zoom: 1;
}
然後只需將 .clearfix 類別添加到需要清除內部浮動的父容器上即可，這是個很好的example。
父層容器觸發 BFC (Block Formatting Context)
這是一種更進階的方法。當一個元素觸發了新的塊級格式化上下文（BFC）時，它會將內部的所有浮動元素都包裹進來，從而解決高度塌陷問題。觸發 BFC 的方式有多種，最常用的是：
- overflow: hidden; (或 auto, scroll)
- display: flow-root; (這是專門為此目的設計的新屬性)
- position: absolute; 或 fixed;
- display: inline-block;
將這些屬性應用於父容器，也能達到清除浮動的效果，且無需額外標籤。
四、浮動的進階探討與互動
與 block 和 inline 元素的互動
- 對 block 元素：浮動元素不會影響其後 block 元素的「盒子」位置，但會佔據其「內容」空間。結果是，後面的 block 元素盒子本身位置不變，但其內部的文字內容會被浮動元素推開。
- 對 inline 元素：浮動的element會直接影響 inline 元素類型(類型)的佈局，迫使它們環繞自己排列。
與 position 屬性的關係
- position: absolute 或 fixed 的優先級高於 float。如果一個元素同時設定了這兩者，float 將會失效，元素完全由 position 屬性來定位。
- position: relative 可以與 float 共存。元素會先根據 float 進行浮動，然後再根據 relative 的 top, left 等值進行位置偏移。同時，為浮動元素設定 position: relative 可以使其成為內部絕對定位子元素的定位基準。
常見問題 (FAQ)
Q1: 為什麼我設定了 float 後，父元素的背景色或邊框不見了？
A: 這就是典型的「父層容器高度塌陷」問題。因為浮動的子元素脫離了文檔流，父容器無法計算其高度，導致高度變為 0。您需要對父容器使用上述任一「清除浮動」的方法來解決，這樣其background或color才能正常顯示。
Q2: float 和 display: inline-block 都可以讓元素水平排列，它們有什麼不同？
A: 主要區別在於：
- 文檔流：float 脫離文檔流，而 inline-block 仍在文檔流中。
- 環繞效果：float 會讓後續內容環繞它，inline-block 不會。
- 空白間隙：inline-block 元素之間如果 HTML 原始碼有換行或空格，會產生一個微小的視覺間隙，需要額外處理。float 則沒有這個問題。
Q3: 在 2025 年，我還有必要花時間學習 float 嗎？
A: 有必要。雖然您不應該再使用 float 來做整個網站的主體佈局，但以下場景仍需用到它：
維護舊專案：大量現存網站仍在使用 float 佈局。
Email 模板：由於郵件客戶端的 CSS 支援非常有限，float 和 <table> 佈局仍是主流。
簡單的文繞圖：在文章頁面實現圖片環繞效果，float 依然是最直接、最簡單的工具。
Q4: 我想讓三個 div 水平並排，應該怎麼做？
A: 最簡單的方法是為這三個 div 都設定 float: left;（或 right），並確保它們的總寬度（包括 margin, padding, border）不超過其父容器的寬度。最後，切記要在它們的父容器上應用「清除浮動」的技巧，以避免佈局問題。
總結
float 是 CSS 發展史中一個不可或缺的屬性。它巧妙地從一個簡單的文繞圖工具演變為早期網頁佈局的核心。雖然在今天，我們有了功能更強大、邏輯更清晰的 Flexbox 和 Grid 來處理複雜的頁面佈局，但 float 的價值並未完全消失。
學習 float 不僅是為了應對遺留代碼和特定場景，更是為了深入理解 CSS 的渲染機制、文檔流、BFC 等核心概念。掌握了 float 的特性與其帶來的挑戰，您將能更深刻地體會到現代 CSS 佈局工具所帶來的便利與革新。在未來的開發中，請根據實際需求，選擇最合適的工具，這纔是專業前端工程師的應有之道。
