CSS Float 元素與相鄰內聯元素排版規則：為何圖片不被浮動框遮擋

代碼結構：

<div id="box1" style="float:left; width:200px; height:100px; background:red;"></div>
<img src="test.jpg" width="200" height="100">
<div id="box2" style="width:200px; height:100px; background:blue;"></div>

現象：`box1` 浮動脫離文檔流，但 `img` (內聯替換元素) **不會被覆蓋**，而是緊貼 `box1` 右側排列。

CSS 2.1 規範解釋

「浮動框不在文檔流中，但**影響行盒 (line box) 的縮短**。」

• `box1` 雖脫離流，但佔據左側空間，導致包含塊內的**行盒**可用寬度減少 200px。
• `img` 作為行內元素，生成行盒，行盒左邊界自動避開浮動框，因此圖片從 `box1` 右邊緣開始渲染。
• 若 `img` 前加文字，文字也會環繞浮動框流動。

驗證技巧

將 `img` 移到 `box1` **之前**：

<img src="test.jpg">
<div id="box1" style="float:left;..."></div>

此時圖片佔據第一行完整寬度，`box1` 浮動到第二行左側，證明浮動框**不釋放其原佔空間**，只是讓後續行盒繞開。

清除浮動影響

若 `box2` 也想繞開，無需處理；若 `box2` 想獨佔一行（不受浮動影響），加 clear: left 或父容器 overflow: hidden (BFC)。