浮动元素间间隙主因是HTML空白字符被解析为文本节点参与行内布局；验证可查childNodes或设font-size:0测试；解决法包括删空白、font-size:0重置、改用flex/gird或调整vertical-align。
浮动元素间出现间隙的常见原因
这不是 CSS 的 bug，而是文档流中空白字符（换行、空格、制表符）被浏览器解析为 文本节点，参与行内布局后受浮动影响产生的视觉间隙。尤其在 <div> 套 <span> 或多个 <li> 并排浮动时特别明显。
快速验证是否为空白节点导致
打开开发者工具，选中父容器，在 Elements 面板中关闭「Show user agent shadow DOM」后，逐个折叠子节点——如果间隙随某个换行/空格位置消失，基本可确认是空白文本节点作祟。
- 检查 HTML 源码里浮动元素之间是否有换行或缩进空格
- 用
console.log(parent.childNodes)查看是否包含Text类型节点 - 临时给父容器加
font-size: 0，若间隙消失，说明是空白字符引起的行高问题
消除间隙的实操方案
没有银弹，需按场景选择：
- 移除 HTML 中浮动元素间的换行与空格：把
<div class="fl"></div><div class="fl"></div>写成单行，或用注释连接：<div class="fl"></div><!--><div class="fl"></div> - 父容器设
font-size: 0，再给浮动子元素单独设所需字号（注意继承影响） - 改用
display: flex替代浮动——这是现代标准解法，gap属性可控且无空白干扰 - 避免对
<img>等替换元素浮动时未清除基线对齐：加vertical-align: top或display: block
为什么 float + inline-block 混用更容易出问题
浮动元素会脱离文档流，但其后的兄弟元素仍按正常流排布；而 inline-block 元素默认保留空白字符间距，一旦与浮动共存，布局计算更难预测。
立即学习“前端免费学习笔记（深入）”；
.container {
font-size: 0; /* 消除 inline-block 间隙 */
}
.item {
display: inline-block;
font-size: 14px; /* 恢复文字大小 */
vertical-align: top;
}这种组合容易让开发者误判“浮动已生效”，实则部分元素仍在行内上下文里排队。真正需要多列并排时，优先用 flex 或 grid，浮动只用于文字环绕等特定语义场景。
浮动结构一旦嵌套层级变深，空白节点的传播路径就更难追踪——与其反复调试，不如从根源上减少浮动使用频率。
