浮动换行后出现空缺是因矮元素右侧留空隙，后续浮动项上浮钻入所致，并非bug；根本原因是父容器未触发bfc、子项高度与基线未对齐、html空格干扰三者叠加。
浮动元素换行后出现空缺，不是“漏了元素”，而是后续浮动项钻进了前一行矮元素留下的垂直空隙里——这是 float 的原始行为，不是 bug，但必须主动约束。
为什么浮动换行后会出现视觉空缺
浮动元素脱离文档流，父容器无法感知其真实高度；当某几个元素高度不一致时，矮的那几个右侧会留下空白区域，下一个浮动元素会“上浮”贴过去，造成下一行开头错位、中间悬空。这种空缺和 HTML 换行产生的 4px 间隙不同，它来自基线对齐失控 + 高度未拉齐 + BFC 未触发三者叠加。
- 常见现象：4 列导航中第三项很短，第四项被吸到它右边，第二行第一项从第三列开始排
- 错误归因：以为是
clear: both没加，或 margin 设错 - 本质原因：父容器没形成 BFC，导致浮动溢出；子项又没统一基线或高度，留出可钻空隙
用 display: flow-root 替代传统清除浮动
给浮动容器直接设 display: flow-root 是最干净的解法，它既触发 BFC 包住所有浮动子项，又不引入额外 DOM 节点或默认 margin，还能避免 overflow: hidden 可能导致的裁剪问题。
-
flow-root在 Chrome 52+/Firefox 58+/Safari 15.4+ 全面支持，IE 不支持（但 IE 已淘汰） - 不要写成
overflow: auto或hidden来“假装清浮”，那只是让父容器高度计算变准，空缺本身还在 - 如果必须兼容旧浏览器，用伪元素：
.container::after { content: ""; display: table; clear: both; }
统一高度和基线比硬设 height 更可靠
强制设 height: 60px 看似简单，但一旦内容换行或字号变化，就立刻崩；更健壮的做法是控制基线对齐 + 内部留白。
- 给所有浮动项加
box-sizing: border-box，再用padding-bottom拉齐底部（比如都设padding-bottom: 20px） - 在浮动项的**直接父容器**（不是浮动项自己）上设
vertical-align: top，对 float 元素本身设这个无效 - 避免用
line-height垂直居中文字——它只在单行生效，多行时反而加剧错位
HTML 源码里浮动元素之间不能有换行或空格
哪怕你 CSS 写得再完美，只要 HTML 中 <div class="item"></div> 和下一个之间有回车或空格，浏览器就会插入一个 U+0020 字符，在 font-size: 16px 下撑开约 4px 宽度，导致最后一项右偏、换行后首项左悬空。
- 开发阶段可用模板语法自动拼接：
{items.map(item => `<div class="item">${item}</div>`).join('')} - 手动写 HTML 时压成一行：
<div class="item">A</div> <div class="item">B</div> <div class="item">C</div> - 若必须保留可读性，给父容器设
font-size: 0，再给每个子项显式重置font-size（注意：子项含文字才需这步）
真正麻烦的不是选哪个方案，而是得先分清：空缺是来自高度不齐导致的“上浮钻空”，还是 HTML 换行导致的“横向撑开”。两者成因不同，混用解法只会让调试更绕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
