清除浮动后出现3px间距本质是inline-block元素引发的行框间隙，由vertical-align: baseline、字体descender和line-height共同导致，并非clear本身问题。
为什么清除浮动后还有3px间距：本质是inline-block的行框间隙，不是clear的问题
清除浮动后出现的“3px间距”，90%以上跟clear本身无关，而是因为浮动元素和inline-block元素共存时，浏览器为文本行生成的行框（line box）默认存在基线对齐和字体度量留白。这个空隙是vertical-align: baseline + 字体下降部（descender）+ 行高（line-height）共同作用的结果，肉眼看起来像“3px”，实际值随字体、字号、缩放动态变化。
- 用
outline或开发者工具的“Layout”面板检查，会发现该间隙不属于任何元素的margin或padding，而是行框容器自身的空白 -
display: inline-block元素默认参与行内格式化上下文，哪怕它内部有浮动子项，父级仍按行内规则分配空间 - 清除浮动（如
::after { clear: both }）只解决父容器塌陷，不干预行框渲染逻辑
如何快速定位是不是inline-block惹的祸
在开发者工具中选中那个“多出间距”的容器，看Computed面板里的display值是否为inline-block；再往上查它的父容器是否设置了font-size（尤其非0），以及是否有未包裹的换行符或空格——这些都会被渲染为文本节点，撑开行框。
- 临时加
font-size: 0到父容器，若间隙消失，基本锁定是行框问题 - 把疑似
inline-block的子元素改为display: block，再观察间距是否还在 - 检查是否混用了
float和inline-block：比如一个div设了float: left，又同时设display: inline-block——这在多数浏览器里会以float为准，但行框干扰依然存在
修复方案：从根上切断行框干扰
别碰margin或clear，直接让元素脱离行内上下文。最稳的三招：
- 父容器设
font-size: 0，所有子元素显式重置font-size（包括文字和inline-block块） - 把
inline-block元素换成display: block+float: left（注意此时必须清除父容器浮动）或直接改用display: flex - 给
inline-block元素加vertical-align: top（适用于高度一致的场景），但需同步确认父容器line-height是否合理
特别注意IE6/7的叠加效应
如果项目还要兼容IE6/7，那这个“3px”可能是双重bug叠加：既有行框间隙，又有IE特有的双倍边距或浮动右侧3px渲染误差。这时候*+html选择器不能乱加——它只对IE7生效，而IE6需要* html或条件注释。
- 先用
font-size: 0验证是否纯行框问题；如果不是，再考虑IE专属Hack - 避免在同一个规则里混用
display: inline-block和float，IE6下行为不可预测 - 真正难调的不是像素值，而是不同浏览器对
line-height: normal的解析差异——Safari和Chrome可能差1px，FF又不一样，靠硬调margin-top: -3px注定失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
