浮动元素间4px间隙源于HTML换行符被渲染为空格字符，当父容器font-size为16px且line-height未重置时，该空格撑开约4px宽度；可通过压缩HTML、设父容器font-size:0（需子元素显式重置字体）或改用flex/grid布局解决。
浮动元素间4px间隙来自HTML换行符
这不是margin或bug，而是浏览器把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>，间隙立刻消失 - 若无法改HTML（如CMS生成、Vue编译后带换行），设父容器
font-size: 0最直接——它不删空格，但让空格失去视觉高度 - 所有浮动子元素必须显式重置
font-size，例如.item { font-size: 14px; }，漏掉就文字消失 - 慎用于含富文本的容器，编辑器插入的
<p>可能继承font-size: 0而失真
清除浮动才能解决父容器塌陷引发的垂直错位
浮动元素脱离文档流，父容器高度变成0，后续元素“顶”上来，看起来像margin-top失效——其实不是间距没了，是容器根本没高度。
常见错误现象：margin-top加在浮动后的块级元素上完全无效；父容器背景色只显示一条细线；outline查看发现高度为0。
立即学习“前端免费学习笔记（深入）”；
- 优先用
display: flow-root触发BFC：语义清晰、无副作用，Chrome 58+/Firefox 53+/Safari 10.1+均支持 - 兼容IE8–9？用伪元素清除：
.clearfix::after { content: ""; display: block; clear: both; }，别漏content: "" -
clear: both只对紧跟在浮动元素之后、且处于正常文档流中的块级元素生效；加在父容器上没用 - 避免用
overflow: hidden——它会裁剪position: absolute溢出的内容
别靠vertical-align或line-height: 0硬调浮动元素
vertical-align对float: left的块级元素根本不起作用，写了等于没写；line-height: 0只对inline或inline-block生效，而浮动元素默认是块级。
- 只有当你把浮动元素也设为
display: inline-block时，vertical-align才有效 - 此时必须统一控制所有子元素的
vertical-align值，否则不同值会再次引发基线错位 -
font-size: 0这类hack会让子元素文字全消失，除非你显式重设每个子元素的字体，嵌套深时极易漏 - 负
margin-left: -4px看似快，但响应式下失效，不同字号下偏移不准，仅适合固定尺寸布局
现代项目直接用display: flex或display: grid
浮动本就不是为多列布局设计的，它是为图文环绕服务的。现在所有主流浏览器都支持display: flex，它天然不产生空白间隙，也不需要清除浮动。
-
flex下子元素间的空格不会渲染，无论HTML换行与否 - 侧边栏+正文？给父容器设
display: flex，删掉所有float和clear - 要兼容IE9及以下，才需退回浮动方案；否则
display: flex + gap更干净 - 某些CSS预处理器（如Sass）的压缩模式会自动删空格，开发环境没间隙、上线后反而出现——得确认构建配置是否保留HTML格式
真正关键的点在于：间隙根源不在浮动本身，而在HTML解析规则与渲染上下文的错配。修浮动不如换上下文——只要还在用float做布局，就得反复调试clear、overflow、line-height和font-size，而且这些调整在Retina屏上会放大成亚像素偏差，最容易被忽略。
