display: flow-root 是最稳解法，它创建BFC以包裹浮动、阻断外边距合并且不裁剪绝对定位元素，但需删除HTML中浮动元素间的换行符以防匿名文本节点撑出白边。
直接用 display: flow-root 就能一并解决父容器塌陷和外边距合并导致的多余空白，比所有清除技巧都干净。
为什么 clear:both 后还有空白？不是 clear 没用，是它不管 margin 合并
空的清除元素（比如 ::after { content: ""; clear: both; }）若没触发 BFC，就只是个高度为 0 的透明通道：上方块的 margin-top 和再上一个兄弟元素的 margin-bottom 会合并，计算值变小甚至归零；而它下方的元素又可能把 margin-top 和它的“顶部”合并，造成意外拉远。DevTools 里看 computed margin-top 值 ≠ 你写的值，基本就是这个原因。
display: flow-root 是最稳的解法，但要注意 HTML 里别留换行符
display: flow-root 让父容器创建 BFC，自动包裹浮动子项、阻断外边距合并、不裁剪 position: absolute 子元素。但它不处理 HTML 文本节点——如果浮动子元素之间有换行或空格，浏览器会渲染出一个匿名 #text 节点，受 font-size 和 line-height 影响，在底部撑出几像素白边。
- 验证方式：Elements 面板悬停父容器，看是否有
#text节点夹在子元素之间 - 修复方法：删掉 HTML 中浮动元素间的换行，写成
<div></div> <div></div>连写形式 - 或临时加
font-size: 0到父容器，再给每个浮动子元素显式设font-size（含img或文字时必须重置）
非得用伪元素清除时，让它“有存在感”而不是“透明穿透”
只写 clear: both 不够，得让清除节点具备 BFC 或最小占位，打断 margin 合并链路：
立即学习“前端免费学习笔记（深入）”；
- 用
display: table替代display: block：.clearfix::after { content: ""; display: table; clear: both; } - 避免
visibility: hidden或opacity: 0：它们不改变盒模型，照样参与 margin 合并 - 慎用
overflow: hidden：虽能触发 BFC，但可能裁剪box-shadow、下拉菜单、tooltip - 真实 DOM 清除节点（如
<div class="clear"></div>）要重置：.clear { clear: both; height: 0; margin: 0; min-height: 1px; }
真正容易被忽略的是：清除浮动只解决“父容器感知高度”，它不定义子项之间的间距逻辑。如果你还在靠各种 hack 对齐像素级空白，说明布局模型本身已经过载——该换 display: flex + gap 或 grid 了。
