浮动元素间间隙主因是html空白字符被解析为文本节点参与行内布局；验证可查childnodes或设font-size:0测试；解决法包括删空白、font-size:0重置、改用flex/gird或调整vertical-align。
浮动元素间出现间隙的常见原因
这不是 css 的 bug，而是文档流中空白字符（换行、空格、制表符）被浏览器解析为 文本节点，参与行内布局后受浮动影响产生的视觉间隙。尤其在
套
快速验证是否为空白节点导致
打开开发者工具，选中父容器，在 Elements 面板中关闭「Show user agent shadow dom」后，逐个折叠子节点——如果间隙随某个换行/空格位置消失，基本可确认是空白文本节点作祟。
- 检查 HTML 源码里浮动元素之间是否有换行或缩进空格
- 用
console.log(parent.childNodes)查看是否包含Text类型节点 - 临时给父容器加
font-size: 0，若间隙消失，说明是空白字符引起的行高问题
消除间隙的实操方案
没有银弹，需按场景选择：
- 移除 HTML 中浮动元素间的换行与空格：把
写成单行，或用注释连接：