浮动元素间4px间隙源于html换行符被解析为空白字符，在font-size:16px且line-height未设0时撑出行高；根治法为父容器font-size:0、HTML去空格或vertical-align+line-height:0，而非依赖overflow:hidden。
浮动元素间莫名出现 4px 间隙，其实是行内元素的换行符在作怪
浮动元素本身不会凭空产生间隙，但当它们是
等块级元素时，如果写在 HTML 中换行了，浏览器会把换行和缩进解析为一个空白字符（
U+0020），而这个字符被包裹在父容器中——只要父容器是 font-size: 16px 且未设置 line-height: 0，它就会占据约 4px 高度，并撑开浮动元素的基线对齐空间，导致视觉上“卡住”或“错位”。
常见现象：多个 Float: left 的
横向排列后，底部不对齐、中间漏白、高度不一致。
- 只在包含文本节点或行内级子元素的浮动容器中明显（比如浮动的
或带文字的）display: block元素浮动后仍受父容器line-height影响，尤其当它“假装”是行内盒子参与行框布局时- 间隙宽度 ≈ 当前
font-size×line-height的行间距部分，不是固定值三种可靠解法，按场景优先级排序
别碰
margin微调，那只是掩盖问题。真正治本的是切断空白字符参与布局的路径。- 父容器设
font-size: 0：最通用，适用于所有浮动子元素不含重要内联文本的场景；子元素需单独重置font-size（否则文字看不见） - HTML 去掉浮动元素间的换行与空格：把
{items.map(...).join('')}） - 子元素设
vertical-align: top+ 父容器line-height: 0：比font-size: 0更精细，保留父容器字号继承链，但需确保所有浮动子元素都显式声明vertical-align
为什么
overflow: hidden有时“管用”，但不该依赖给浮动父容器加
overflow: hidden（或auto）会触发 BFC，让父容器“包住”浮动子元素，看起来间隙消失了——但这只是因为父容器高度计算变准了，**间隙本身还在**，只是被裁剪或对齐方式变了。一旦你给子元素加边框、背景或调试outline，就会发现它们依然没紧贴。立即学习“前端免费学习笔记（深入）”；
- 该写法本质是创建新格式化上下文，解决的是“父容器塌陷”，不是“间隙来源”
- 在 flex / grid 已普及的今天，还靠
overflow挽救浮动布局，等于在修一台还在用软盘驱动器的电脑 - 若父容器本身需要滚动或阴影，
overflow: hidden可能意外截断内容
现代替代方案：别再用 float 做布局了
浮动本就不是为多列布局设计的，它的语义是“文字环绕图片”。现在所有主流浏览器都支持
display: flex和display: grid，它们原生处理间隙、对齐、响应式，没有这些盒模型副作用。比如替换浮动导航栏：
.nav { display: flex; gap: 1rem; /* 显式控制间隙，无歧义 */ } .nav-item { flex: 0 0 auto; /* 不伸缩，保持自身宽度 */ }如果你还在维护老项目，优先用
font-size: 0快速修复；如果是新需求，直接跳过浮动——它留下的坑，比你预想的更难填平。