本文深入解析 css 规范中“top margin that has clearance”这一关键概念，通过浮动、清除与边距折叠的交互机制，结合三组递进式 html/css 示例，清晰说明 clearance 如何阻止父容器与子元素底部边距的折叠。
本文深入解析 css 规范中“top margin that has clearance”这一关键概念，通过浮动、清除与边距折叠的交互机制，结合三组递进式 html/css 示例，清晰说明 clearance 如何阻止父容器与子元素底部边距的折叠。
在 CSS 布局中，“clearance”并非一个显式设置的属性，而是一种由 clear 触发的计算状态：当一个块级元素（如 <header></header>）设置了 clear: left/right/both，且其原本位置会与同一 BFC（块格式化上下文）中的浮动元素重叠时，浏览器会将其 border-box 向下位移，直至完全避开浮动元素的 margin box —— 这一额外的垂直位移量即为 clearance。
关键在于：clearance 会“锚定”该元素的上边距（margin-top）到其被位移后的新 border-box 顶部。这意味着，一旦元素获得 clearance，它的 margin-top 就不再处于原始文档流位置，而是随 border-box 一同下移。而正是这种“带位移的上边距”，触发了 CSS 规范中关于边距折叠（margin collapsing）的特殊限制条件。
以下示例将逐步揭示其影响机制：
? 示例 1：无清除 —— 边距正常折叠
<main><aside style="float:left; width:200px; height:100px; background:tan;"></aside><header style="margin-top:90px;"></header><footer style="margin-bottom:100px;"></footer></main>
main { padding-top: 1px; margin-bottom: 100px; }
此时 <header></header> 无 clear，不产生 clearance；<main></main> 的 margin-bottom:100px、<header></header> 的 margin-top:90px 与 <footer></footer> 的 margin-bottom:100px 彼此相邻，全部折叠为单个 100px 外边距。 内容高度 = 1px（padding） + 100px（折叠后边距） = 101px。
? 示例 2：引入 clear:left —— clearance 阻止折叠
header { margin-top: 90px; clear: left; }
由于 <aside></aside> 高 100px，而 <header></header> 原始 margin-top:90px 不足以使其 border-box 完全避开浮动（需 ≥100px），因此浏览器施加 10px clearance，将 <header></header> border-box 下推 10px。其 margin-top 也随之下移 10px。
此时，<footer></footer> 的 margin-bottom:100px 与 <header></header> 已下移的 margin-top:90px 相邻 —— 而该 margin-top 正是“a top margin that has clearance”。根据规范，当子元素的底边距试图与这样一个带 clearance 的上边距折叠时，父元素（<main></main>）自身的底边距将被排除在折叠之外。
结果：<main></main> 的 margin-bottom:100px 不再参与折叠，独立生效。总高度 = 1px + 100px（main 底边距） + 10px（clearance） + 100px（footer 底边距） = 211px。
? 示例 3：增大 margin-top —— clearance 消失，折叠恢复
header { margin-top: 101px; clear: left; }
此时 <header></header> 的 margin-top:101px 已确保其 border-box 初始位置就在浮动下方（101px > 100px），无需额外位移 → clearance = 0 → <header></header> 的 margin-top 不再是“has clearance”。
规范条件失效，所有相邻边距（包括 <main></main> 的 margin-bottom）重新参与折叠，最终仍为 101px 高度。
✅ 核心总结与注意事项
-
Clearance 是动态计算值，仅当
clear触发实际位移时才存在；若margin-top已足够大，则 clearance 为 0。 - “Top margin that has clearance” 是一个布局状态描述，而非 CSS 属性名，它特指被 clearance 显式“携带”并下移的上边距。
- 该机制是 CSS 边距折叠规则中最易被忽视的例外情形之一，直接影响高度计算与布局稳定性，尤其在浮动+清除混合布局中。
- 现代开发中应优先使用 Flexbox 或 Grid 替代浮动布局，但深入理解 clearance 对调试遗留代码、精准控制盒模型行为仍具不可替代价值。
? 提示：可通过 Chrome DevTools 的“Layout”面板查看元素 computed
clearance（显示为clearance: <length></length>），或使用getComputedStyle(el).clearance（实验性 API，非所有浏览器支持）验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
