应改用display: inline-block替代float并配vertical-align: top，或为float父容器设overflow: hidden触发bfc；ie8下需用带单位line-height避免舍入误差；flex布局中vertical-align无效，须改用align-items/justify-content。
float列表项文字基线不齐，怎么让它们视觉对齐？
浮动列表项（float: left）默认按baseline对齐，但不同字体、字号或行高下，文字底部实际位置不同，导致视觉“一高一低”。这不是bug，是CSS默认行为。
- 别用
vertical-align: middle——它对float元素无效（只作用于inline/inline-block和table-cell） - 统一
line-height必须配合font-size一起设，否则小字号+大行高会撑开容器高度 - 更可靠的做法是改用
display: inline-block替代float，再配vertical-align: top或middle - 如果必须保留
float，可在父容器加font-size: 0，子项重置font-size并设line-height为具体数值（如line-height: 1.5），消除字体度量带来的基线浮动
float + clear后列表换行错位，为什么clear没起作用？
clear: both只影响自身，不影响后续浮动元素的布局起点。常见现象是：第4个li本该换行，却卡在第3个右边空隙里——因为前3个没形成“块级上下文”来包裹浮动流。
- 给父
ul加overflow: hidden或overflow: auto（触发BFC），比clear更稳 - 避免用
<div style="clear:both"></div>这种冗余清浮动方式，现代项目直接上::after伪元素清除 - 如果列表项高度不一致，仅靠
clear无法解决“左高右矮导致下一行左偏”的问题，得配合height或min-height约束
IE8下float列表项间隙莫名变大，是不是line-height惹的祸？
是。IE8及更早版本对line-height的解析有偏差：当父容器line-height设为无单位数值（如1.4），子元素继承后会乘以自身font-size，但计算过程有舍入误差，尤其在小字号（如12px）时，1.4 × 12 = 16.8px → 17px，多出的1px被渲染为额外空白。
- IE8兼容方案：父容器用
line-height: 14px（带单位），子项显式重置line-height: 1.4或固定值 - 不要依赖继承，所有浮动子项都应明确设置
line-height和vertical-align - 若用
zoom: 1触发hasLayout，可能加剧该问题，优先用overflow: hidden代替
用flex替代float做列表后，vertical-align失效了怎么办？
vertical-align在flex容器中完全无效——它是inline布局的老规矩，flex有自己的对齐体系。强行保留只会白写。
- 把
vertical-align: middle换成align-items: center（主轴垂直居中）或justify-content: center（交叉轴水平居中） - 单行文本居中：确保
flex-direction: row，然后align-items: center+height或min-height定高 - 如果旧代码里混用了
vertical-align和float，迁移时要整体替换，不能只改display属性
浮动列表的对齐本质是“控制基线+控制容器高度”，不是调一个属性就能搞定的事。最容易被忽略的是：字体度量差异在不同系统（Windows/macOS）、不同渲染引擎（WebKit/Gecko/Trident）下表现不一致，所以测试不能只看Chrome。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
