浮动元素间4px间隙源于HTML换行符被解析为空格字符，在font-size:16px且line-height未重置时撑开约4px宽度；需用font-size:0切断空白渲染并显式重置子元素字号，或改用flex/grid布局根治。
浮动列之间出现意外空隙，不是 margin 或 padding 搞的鬼，而是 HTML 换行符被浏览器解析为一个空白字符（U+0020），在父容器 font-size: 16px 且未重置 line-height 时，这个空格会撑开约 4px 宽度，导致视觉错位。
为什么浮动元素间会有 4px 间隙
只要浮动子元素在 HTML 中写成多行，比如：
<div class="col"></div><br><div class="col"></div>
浏览器就会把换行当作空格字符渲染。它参与的是行内格式化上下文（IFC），不是块级流——所以调 margin、padding、vertical-align 都无效，除非你先切断这个上下文。
- 用开发者工具选中父容器，在 Computed 标签页确认
font-size和line-height是否继承了非零值 -
vertical-align对float: left的块级元素完全不起作用（只对inline或inline-block生效） - 负
margin-left: -4px看似快，但响应式下失效，不同字号下偏移不准
用 font-size: 0 切断空白字符渲染
这是最直接、兼容性最好的解法：让空白字符失去视觉高度，而不是删掉它。
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
font-size: 0，间隙立刻消失 - 所有浮动子元素必须显式重置字体，例如
.col { font-size: 14px; }，漏掉就文字消失 - 慎用于含富文本的容器（如 CMS 输出的
<p>），编辑器插入的内容可能继承font-size: 0而失真 -
font-size: 0对<img>、伪元素无影响，但会干掉按钮文字、链接文本——必须显式恢复
用 display: flow-root 解决父容器塌陷引发的“大空白”
所谓“下方一大块空白”，本质是父容器高度坍缩为 0，后续元素从浮动元素底部开始渲染。这不是间隙，是塌陷。
- 优先用
display: flow-root：专为此设计，无裁剪副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 支持 - 避免
overflow: hidden：它会裁剪position: absolute子项或阴影，IE8–9 也不支持 - 别给父容器写
clear: both：语法合法但毫无作用，它不参与浮动流 - 伪元素清除法（兼容老浏览器）：
.clearfix::after { content: ""; display: table; clear: both; }，别漏content: ""
现代项目里真正该做的其实是停用 float 做布局
浮动本意是图文环绕，不是多列布局。现在所有主流浏览器都支持 display: flex 和 display: grid，它们没有空白字符干扰、无需清除、天然响应式。
- 替代浮动并排：
.container { display: flex; gap: 12px; } - 替代浮动网格：
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } - 如果必须保留浮动（如维护老项目），优先用
font-size: 0+flow-root组合，而不是靠margin微调掩盖问题
最容易被忽略的一点：间隙常出现在嵌套较深的结构里，比如浮动子元素内部还有文字节点——此时 font-size: 0 会影响所有后代，必须逐层重置，漏一层就白忙。
