CSS 浮動排版 float：文繞圖與高度塌陷的解法
float 是 CSS 中的一個屬性，用於將元素從正常的文檔流中移出，並使其向左或向右對齊。這個屬性在早期的網頁排版中非常普遍，但隨著 Flexbox 和 Grid 的出現，使用頻率已逐漸減少。
文檔流 (Normal Flow)
是指瀏覽器的正常排版規則，包含 區塊元素 會往下延伸，杭內元素 會並排直到沒有空間才會往下延伸。
float
none: 元素不浮動，保持在正常文檔流，預設值。left: 元素浮動到容器的左側，後續內容會環繞在右側。right: 元素浮動到容器的右側，後續內容會環繞在左側。inherit: 繼承父元素的float屬性值。
WARNING
浮動元素會脫離正常文檔流，導致版面錯亂。
繞圖排文
以下是一個簡單的例子，展示如何使用 float 讓圖片浮動並讓文字環繞它。
解決父元素高度遺失的問題
clear
當使用 float 時，後續的元素會受到浮動元素的影響，導致父層容器的高度塌陷。為了解決這個問題，可以使用 clear 屬性來解決這個問題，讓元素恢復到正常的流向中。
none: 不清除浮動，元素可以與浮動元素並排，預設值。left: 清除左側的浮動，元素會移到左側浮動元素的下方。right: 清除右側的浮動，元素會移到右側浮動元素的下方。both: 同時清除左右兩側的浮動，元素會移到所有浮動元素的下方。inherit: 繼承父元素的 clear 屬性值。
在 HTML 增加空元素
早期瀏覽器還不是很強大時，會在 HTML 文件中加入 <span> 元素，且利用此元素來進行 clear 屬性的操作。如下方所示:
TIP
clear 屬性可清除左側或右側，一般來說，會建議使用 both 來同時清除兩側。這樣一來，就不用顧慮前面的元素是設定 float: left; 或 float: right;。
使用偽元素
在複雜的版面中，到處充斥著水平排列的呈現，相對地，也就會產生出無數個空元素。這些元素只是為了讓排版正常而存在，對於使用者閱讀網頁內容並無特別的意義，無形中也會讓 HTML 文件愈來愈肥大。隨著瀏覽器的進步，我們便可以使用 偽元素 來解決空元素的問題。如果對於 偽元素 不熟悉可以複習一下。
現代的替代方案
/* ❌ 舊寫法：需要處理高度塌陷 */
.col { float: left; width: 33.33%; }
/* ✅ 現在：一行搞定，還能控制間距 */
.row { display: flex; gap: 24px; }
.col { flex: 1; }版面配置請交給 彈性盒子 或 格線系統，float 現在主要只留給 文繞圖。
常見問題
為什麼父元素的高度變成零？
因為浮動元素脫離了正常的文件流，父層計算高度時不會把它算進去。解法是在父層後方清除浮動，或改用會自行處理的排版方式。
現在還適合用 float 排版嗎？
不適合。版面配置請用 flex 或 grid，它們不會有高度塌陷的問題也更好對齊。float 現在主要只用在文繞圖。
文繞圖只能用 float 嗎？
目前仍是最簡單的做法。flex 與 grid 會讓元素自成一個區塊，文字不會繞著它排。
