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;观察各元素实际占据的垂直范围