CSS Float 浮動導致兄弟元素無法頂部對齊的原因與修正

現象重現

容器 #king 內有兩個子元素：#a（包含多個 .a_son 浮動塊）與 #b（float:left）。預期 #b 貼頂靠左，實際卻在 #a 底部留有間距。截圖如下：

根本原因

float:left 的參考基準是「同層級中前一個浮動元素」或「父容器內容邊緣」。#a 未浮動，屬於正常流塊級盒子，#b 尋找同級浮動元素失敗，轉而參考 #a 內部的浮動元素（.a_son），導致其頂邊與最後一個 .a_son 底邊對齊。

解決方案

1. 讓 #a 也浮動：給 #a 加上 float:left，#b 即可緊跟其右側頂部對齊。
2. 使用 Flexbox/Grid 替代 Float（現代佈局推薦）：

   #king { display: flex; flex-wrap: wrap; }
   #a { flex: 0 0 100px; }
   #b { flex: 0 0 100px; }
   

3. 清除浮動 + 定位：在 #a 後插入 <div style="clear:both"></div>，但會改變文檔流結構，不推薦。

核心原則

Float 只會影響後續「同層級」的浮動或內聯元素，非浮動塊級兄弟元素會無視浮動元素佔據空間。理解「浮動參考系」是掌握 Float 佈局的關鍵。