浮动元素间的“幽灵空白”是换行符转为空格后在父容器 font-size 和 line-height 下撑开的间隙，并非 bug；根本解法是弃用 float，改用 flex 或 grid 布局。
浮动元素之间的“幽灵空白”不是 bug，而是 HTML 换行符被浏览器解析为空格字符后，在父容器 font-size 和 line-height 下撑开的视觉间隙——直接删空格或硬调 margin 都是掩耳盗铃。
为什么 float 元素间会出现 4px 左右的间隙？
当你把多个 float: left 的 <div> 写成多行时：
<div class="item"></div> <div class="item"></div>
中间的换行符会被当成一个 U+0020 空格，参与父容器的行内格式化上下文（IFC）布局。只要父容器有 font-size: 16px 和默认 line-height: 1.2，这个空格就约等于 4px 宽高，导致元素底部错位、间隙漏白。
这不是 margin 或 padding，用开发者工具选中父容器 → Computed → 查 font-size 和 line-height 就能验证。
立即学习“前端免费学习笔记（深入）”；
父容器设 font-size: 0 最通用，但必须重置子元素字体
这是目前兼容性最好、HTML 不可控时最稳的解法：
- 给父容器加
font-size: 0：它不删空格，只是让空格失去渲染高度 - 所有浮动子元素必须显式恢复字号，例如
.item { font-size: 14px; }，漏掉文字就看不见 - 图片、伪元素、
<input>不受影响；但含富文本的容器（如 CMS 输出的<p>）慎用，可能继承失真 - 别只设
font-size: 0就完事——检查子元素是否真的都重置了，嵌套深时极易漏
用 display: flow-root 解决塌陷，但不治间隙本身
很多人混淆“间隙”和“塌陷”：font-size: 0 消除的是间隙，而父容器高度为 0 是塌陷问题，需单独处理。
display: flow-root 是现代标准方案，它创建 BFC，让父容器重新包裹浮动子元素：
- 语义清晰、无裁剪副作用（不像
overflow: hidden可能切掉position: absolute子项） - Chrome 58+/Firefox 53+/Safari 10.1+ 均支持，IE 完全不支持
- 它**不消除间隙**——只是让父容器高度算准了，间隙还在，但视觉上常被误认为“修好了”
- 务必和
font-size: 0配合使用：一个管间隙，一个管塌陷
真正该停手的地方：别再用 float 做布局
所有这些技巧本质是在给一个已淘汰的布局模型打补丁。浮动本意是图文环绕，不是做网格、侧边栏或响应式卡片流。
换成 display: flex 或 display: grid 后：
- 子元素天然在文档流中，父容器高度自动撑开，无塌陷
- 间隙由
gap属性精确控制，不依赖空白字符或基线对齐 - 响应式切换更干净，无需反复重置
float、clear、margin
如果你还在靠 font-size: 0 + ::after + clear: both 组合拳调浮动，问题不在代码写得不够细，而在布局模型选错了——那才是最该被清除的“幽灵”。
