浮动元素间缝隙源于HTML解析将换行/空格转为空白字符，其宽度受font-size等影响，并非margin或bug；解决方式有HTML压缩、font-size:0重置、负margin，但flex布局更优。
浮动元素之间为什么会有看不见的缝隙
因为行内换行和空格被解析为一个空白字符，而浮动元素默认是 display: inline-block 级别的参与格式化上下文，这些空白会渲染成约 4px 宽的间隙。不是 margin，不是 bug，是 HTML 解析规则本身决定的。
常见错误现象：float: left 的多个 div 并排时，右边总多出几像素空隙，用开发者工具看不出 margin/padding，但视觉上明显不贴边。
- 只在「有文本换行+浮动」组合下出现，纯 JS 动态插入无换行则无此问题
- 影响范围仅限于父容器未触发 BFC 且子元素为浮动时的行内布局流
- 该空白字符宽度受字体、
font-size和white-space影响，不一定固定为 4px
去掉浮动间隙的三种实操方式及取舍
没有银弹，选哪种取决于你能否改 HTML 结构、是否要兼容老浏览器、以及是否已用 BFC 清除浮动。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- HTML 写成一行（或注释掉换行）：
<div class="item"></div> <div class="item"></div>—— 最快但可读性差，协作时容易被格式化工具破坏 - 父容器设
font-size: 0，子元素重置font-size—— 兼容性好，但若子元素含文字需逐个恢复，嵌套深时易漏 - 用
margin-left: -4px负偏移抵消（慎用）—— 响应式下失效，不同字号下偏移值不准，仅适合固定尺寸布局
为什么 display: flex 更值得优先考虑
浮动本就不是为多列布局设计的，它是为文字环绕服务的。现在所有主流浏览器都支持 display: flex，它天然不产生空白间隙，也不需要清除浮动。
立即学习“前端免费学习笔记（深入）”；
-
flex下子元素间的空格不会渲染，无论 HTML 换行与否 - 无需
clearfix或overflow: hidden来包裹浮动塌陷 - 如果必须兼容 IE9 及以下，才需要退回浮动方案；否则直接用
display: flex是更干净的选择
浮动间隙在响应式断点下容易被忽略的细节
间隙本身随 font-size 缩放，而媒体查询常只调字体大小不调浮动逻辑，导致小屏下间隙比例变大、更刺眼。
- 用
rem设置font-size: 0不起作用，必须用px或em - 使用
vw动态调整字体时，记得同步检查浮动间隙是否重现 - 某些 CSS 预处理器（如 Sass）的压缩模式会自动删空格，开发环境没间隙、上线后反而出现 —— 要确认构建配置是否保留 HTML 格式
