CSS Float 布局疑問：為何內聯元素環繞浮動塊而塊級元素不環繞？

現象描述

<div id="div1">          /* 父容器 */
  <div id="div2"></div>    /* float:left; 綠色塊 */
  <div id="div3">         /* 橙色塊，無 float */
    <a href="#">鏈接</a>  /* 內聯元素 */
    <!-- <div id="div4"></div> --> /* 註釋掉的塊級元素 */
  </div>
</div>

現象：div3 整體移至 div2 下方（正常脫離文檔流），但 div3 內部的 <a> 卻環繞 在 div2 右側；若取消註釋 div4，它會隨 div3 整體下移。

原理解析

1. Float 最初設計目的：實現文字/內聯元素環繞圖片（如報刊排版）。因此 內聯元素（inline/inline-block）會主動環繞浮動元素。
2. 塊級元素（div、p 等）不環繞浮動元素，其邊框會無視浮動元素延伸至包含塊邊緣，但內部內容（行盒）會環繞。
3. div3 作為塊級元素，其外邊距/邊框/背景會延伸至 div2 下方（視覺上「跑到下面」），但內部的 <a>（內聯）受浮動影響，行盒縮短並環繞 div2。
4. div4 若存在，同為塊級元素，其整個盒模型（含邊框背景）會被推至 div2 下方，不發生環繞。

驗證技巧

給 div3 加 background: rgba(255,165,0,0.5)，可見其背景實際延伸至 div2 後方，證明塊級盒子未脫離文檔流，僅內部行盒環繞。

清除浮動影響

若需 div3 完全不受 div2 影響（不環繞、不重疊），可為 div3 添加 overflow: hidden 或 display: flow-root 觸發 BFC（塊級格式化上下文）。