浮动元素间隙不均的根本原因是脱离文档流后，HTML空白符在行内上下文中受font-size和line-height影响产生高度，导致基线错位及margin失效；解决需父容器触发BFC、子项统一只设单侧margin、末项显式清零margin。
浮动元素间隙不均的根本原因是什么
浮动元素本身不会“主动”产生间隙，但它们脱离文档流后，会把父容器当作行内上下文来参与对齐——这时 HTML 中的换行符、空格会被解析为 U+0020 空白字符，而这个字符受 font-size 和 line-height 影响，在默认 font-size: 16px 下常撑出约 4px 高度，导致基线错位；同时，margin 在浮动间也不再稳定生效，尤其末项多出一份 margin-right，或高度不一时后续元素被“卡住”，视觉上就是左右/上下间隙忽大忽小。
用 margin 控制浮动间隙时必须满足的三个条件
仅写 margin-right: 16px 是不够的，必须同步处理以下三点，否则间隙必然不均：
- 父容器必须触发 BFC（推荐
overflow: hidden或display: flow-root），否则浮动子元素无法被包裹，margin的参考系就乱了 - 所有浮动子项统一只设单侧 margin（如
margin-right），禁止混用margin-left或双侧 - 必须显式清除末项：
.item:last-child { margin-right: 0; }，不能依赖calc()或 JS 动态计算，响应式断点下极易失效
为什么 font-size: 0 是最稳的均等间隙方案
这不是权宜之计，而是从源头切断空白字符渲染路径：父容器设 font-size: 0 后，HTML 换行符即使存在，也因字号为 0 而不占空间；所有浮动子项只需单独重置 font-size（如 font-size: 14px）即可显示文字。相比 vertical-align + line-height: 0，它不要求每个子项都声明 vertical-align，也不依赖 line-height 计算精度，兼容性覆盖 IE8+，且无层叠风险。
现代项目里真正值得投入精力的地方
浮动布局的间隙问题本质是“修补型设计”——你花半天调 margin 和 zoom: 1，不如直接改用 display: flex 配合 gap。当前主流浏览器（Chrome 84+/Firefox 63+/Safari 14.1+）已全面支持 gap，一行 gap: 16px 就能实现像素级均等，且自动处理末项、响应式缩放、内容溢出等边界情况。若需兼容旧版 IE，优先考虑降级策略（如用 margin + :first-child），而不是在浮动上反复打补丁。
容易被忽略的是：哪怕你坚持用浮动，也该把 --gap 变量定义在 :root，并同时用于浮动和 Flex 的 margin/gap 声明——这样迁移那天，改的真就只有一行 display。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
