CSS浮动布局中文字行高不一致会导致浮动元素高度参差、换行错乱、父容器塌陷；根本原因是line-height、font-size、padding或vertical-align差异导致基线与行框高度不统一；最有效解法是统一设置无单位line-height（如1.5），配合vertical-align、font-family及clearfix等综合修复。
在CSS浮动布局中，如果文字行高不一致，会导致浮动元素高度参差、换行错乱、父容器塌陷等问题。根本原因是各元素的line-height、font-size、padding或vertical-align不同，使基线对齐和行框高度不统一。最直接有效的解决方式，就是用line-height配合其他属性做显式控制。
用line-height统一行框高度
line-height决定一行文字所占的垂直空间（即行框高度），它不只影响字间距，更直接影响浮动元素的计算高度。只要给浮动子元素设置相同的line-height（推荐使用无单位数值，如1.5），就能让它们的行框高度按字号比例自动对齐。
- 避免用
px固定值，否则不同字号下会失衡；优先用无单位数字（如line-height: 1.4;） - 确保所有浮动项（如
.item、.card）都继承或显式声明同一line-height - 若文本只有一行，可加
overflow: hidden;和text-overflow: ellipsis;防溢出干扰高度
配合font-size和vertical-align修复基线偏移
即使line-height一致，若字体本身x-height差异大（比如中文字体混用思源黑体和微软雅黑），或内联元素含图片、图标，仍可能出现视觉错位。这时需检查基线对齐：
- 给浮动容器内的内联内容（如
span、img）设vertical-align: middle;或top; - 统一
font-family栈，减少字体渲染差异；必要时用font-size-adjust保持x-height稳定 - 若含图标字体或SVG，建议设
display: inline-block;并配vertical-align: middle;
清除浮动后重置高度一致性
浮动元素脱离文档流，父容器常因高度塌陷而无法包裹内容，进而放大行高不一致的视觉问题。因此需主动清除浮动，并确保父容器有明确高度参考：
立即学习“前端免费学习笔记（深入）”；
- 用
clearfix类（::after伪元素+clear: both）包裹浮动项 - 父容器可设
min-height或height: fit-content;（注意兼容性），避免高度被压缩 - 若使用
display: flex;替代浮动，行高问题基本消失——这是现代布局更稳妥的选择
调试小技巧：快速定位行高异常
- 选中浮动元素 → 查看Computed面板中的
line-height和height实际值 - 勾选“Show layout bounds”（Chrome DevTools Layout标签下），直观查看行框与边框是否重合
- 临时加
outline: 1px solid red;观察各元素实际占据的垂直范围
