CSS 浮動佈局核心原理：為什麼需要 float 以及它如何改變文檔流

CSS 浮動佈局核心原理：為什麼需要 float 以及它如何改變文檔流

CSS float 屬性是早期網頁佈局的核心手段，雖然現代佈局推薦 Flex/Grid，但理解 float 原理對維護老項目、處理文字環繞仍至關重要。

標準文檔流的限制

• 塊級元素：獨佔一行，垂直堆疊，寬度默認撐滿父容器。
• 行內元素：水平排列，寬高不可設置，僅容納內容。
• 無法並排：兩個 div 無法並排顯示，除非改為行內塊或使用浮動/定位。

float 的作用機制

當設置 float: left/right 時：

1. 元素脫離標準流，向父容器左/右邊緣移動，直到碰到邊緣或另一個浮動元素。
2. 元素不再撐滿寬度，而是「收縮包裹」內容（類似 display:inline-block）。
3. 後續標準流元素會無視浮動元素佔據的空間，但其內容（文字/行內元素）會環繞浮動元素排列。

典型應用場景

• 多欄佈局：左側欄 float:left; width:200px;，右側內容 margin-left:210px;。
• 圖文環繞：img { float:left; margin-right:10px; } 文字自動環繞圖片。
• 導航欄：li { float:left; } 實現水平菜單。

浮動帶來的問題與清除

父容器高度塌陷（高度為 0），導致背景、邊框無法包裹浮動子元素。解決方法：

• Clearfix Hack：.clearfix::after { content:""; display:table; clear:both; }
• 父容器 overflow:hidden/auto：觸發 BFC。
• 末尾添加空 div：<div style="clear:both"></div>（不推薦，污染 HTML）。