清除浮动后空隙源于line-height和font-size导致的行框撑高，非margin所致；display:table比block更稳因脱离行框；推荐用flow-root、flex或grid替代浮动。
清除浮动后空隙来自 line-height 和 font-size
清除浮动本身不会产生空隙，但父容器恢复高度后，内部 inline 或 inline-block 元素（比如文字、<img>）会按默认基线对齐，而 line-height 和 font-size 会撑出行框（line box），导致顶部或底部多出空白——这空隙不是 margin，调它没用。
常见现象：
- 父容器加了
.clearfix::after后，下方突然多出 4–8px 空白 - 开发者工具里选中伪元素，发现它没高度，但父容器的“内容区域”却有高度
- 删掉里面所有文字或图片，空隙立刻消失
关键判断点：打开浏览器 DevTools，把鼠标悬停在父容器上，看蓝色高亮区域是否包含一段“看不见的行高”。如果有，就是行框在作祟。
为什么 display: table 比 display: block 更稳
.clearfix::after { content: ""; display: block; clear: both; } 在某些场景下仍会留缝，尤其当父容器设置了 line-height 或 font-size 时。display: block 的伪元素仍处于行内格式化上下文中，受父级 line-height 影响；而 display: table 完全脱离行框，不参与基线对齐，视觉上真正“零占位”。
实操建议：
- 始终用
display: table替代display: block写法 - 不要加
height: 0或font-size: 0到伪元素上——它本就不该有内容，table 已足够干净 - 避免给父容器设
line-height，除非你明确需要控制文字行距（此时子元素需重置）
父容器 font-size: 0 是最直接的压制手段
只要父容器里混有文字、<img> 或其他 inline 元素，font-size: 0 就是最简单有效的“关闸”操作。它让行框高度归零，伪元素和文字不再互相拉扯。
但必须配套处理子元素：
- 所有需要显示文字的子元素（如
<p></p>、<span></span>、<img>）必须显式重置font-size和line-height -
<img>还要加vertical-align: top或display: block，否则仍可能因基线对齐挂出底部空隙 - 若子元素是
inline-block，也建议统一设为display: block，彻底退出行内流
现代布局下，别硬扛浮动清除
如果你只是想让父容器包裹子项、消除塌陷和空隙，float + clearfix 是兼容性补丁，不是设计原意。2026 年绝大多数项目已无需支持 IE10 以下：
- 改用
display: flow-root—— 语义清晰、无副作用、自动 BFC，一行解决塌陷 - 直接上
display: flex或display: grid—— 浮动元素在里面完全失效，间隙问题自然消失 - 若必须保留浮动（如旧系统迁移），至少把清除逻辑收进
::after，别插空<div class="clear"></div>，那种 DOM 节点自带默认 margin，更难排查
真正容易被忽略的是：空隙往往不在伪元素身上，而在你没注意到的那行换行符、那个没重置的 img、或者父容器悄悄继承来的 line-height: 1.6。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
