浮动元素间4px间隙源于html换行符被解析为空格，受父容器font-size和line-height影响；可通过压缩html、设font-size: 0（子元素需重置字体）或改用flex/grid布局解决。
浮动元素间4px间隙来自HTML换行符
浮动元素之间出现的“莫名”间隙，大概率不是CSS写错了，而是你写的HTML里那几个看不见的换行和缩进被浏览器当作了空格字符。只要父容器有font-size: 16px且没重置line-height，这个空格就会撑开约4px高度，并让浮动元素在基线对齐时错位。
- 用开发者工具选中父容器，看 computed 样式里的
font-size和line-height是否继承了非零值 - 检查浮动子元素在 HTML 中是否写成了多行，比如：
<div class="item"></div>\n<div class="item"></div> - 把它们压成一行：
<div class="item"></div> <div class="item"></div>，间隙立刻消失
用font-size: 0快速屏蔽空白字符影响
如果没法改HTML结构（比如CMS生成、Vue模板编译后带换行），最直接的办法是让父容器不渲染那个空格：设font-size: 0。它不会删除空格，但会让空格失去视觉高度。
- 父容器加
font-size: 0，所有浮动子元素必须显式重置字体，例如：.item { font-size: 14px; } - 注意：如果子元素里还有文字、
<span></span>或<img>，漏掉重置就会变看不见 - 慎用于含富文本的容器——编辑器插入的
<p></p>可能继承font-size: 0而失真
为什么vertical-align + line-height: 0更精细但难控
比起font-size: 0，用line-height: 0配合vertical-align: top能保留字号继承链，但只对inline或inline-block元素生效。而float: left的<div>默认是块级，<code>vertical-align根本不起作用。
- 只有当你把浮动元素也设为
display: inline-block时，vertical-align才有效 - 此时必须统一控制所有子元素的
vertical-align值，否则不同值会再次引发基线错位 -
line-height: 0会影响内部真实文本的行高，若子元素含多行文字，需单独重置其line-height
现代项目别再靠这些hack救浮动
所有这些间隙问题，根源都是在用float干它不该干的事——布局。现在display: flex和display: grid已全平台稳定支持，连 Safari 15.4+ 都原生支持display: flow-root清除塌陷。
- 侧边栏+正文？直接给父容器设
display: flex，删掉所有float和clear - 需要兼容老IE？那就只在真正必须的地方用
::after清除，别把font-size: 0当万金油全局铺 - 最容易被忽略的是：哪怕只在一个局部模块里用了浮动，它对周围内联内容（比如段落中的空格、
<img>）的影响依然存在，且在Retina屏上会放大成亚像素偏差
