CSS 解決浮動布局中後續 DIV 不緊貼上方最高 DIV 的問題

問題現象

容器寬 800px，四個子 DIV 浮動排列。前兩個並排，第三、四個卻以第一個 DIV 的高度為基線開始浮動，導致垂直方向留白，期望第三、四個緊貼第一個 DIV 底部。

原因

浮動元素遵循「盡量靠上、靠左/右」原則，但受 清除浮動 影響：若第一個 DIV 高度較大，第二個較小，第三個浮動時會碰到第一個的底部邊緣，而非第二個。

解決方案

1. 固定高度：給每行容器固定高度，或使用 clear: both 分行。
2. Flexbox 布局（推薦）：
   .container { display: flex; flex-wrap: wrap; }
.item { width: 50%; box-sizing: border-box; }
   自動換行且對齊基線，無浮動副作用。
3. Grid 布局：
   .container { display: grid; grid-template-columns: repeat(2, 1fr); }
4. 浮動 + 清除：每兩個一組包裹在 <div class="row"> 內，.row::after { content: ""; display: table; clear: both; }

現代項目優先使用 Flex/Grid，兼容舊瀏覽器可加 float 降級。