float导致line-height“失效”实为行框受浮动干扰而变形，修复需稳住行框高度、设vertical-align: top、触发bfc；现代布局优先用flex/grid替代float。
为什么float会让line-height看起来“失效”
float元素脱离文档流，但其周围的内联内容（文字、<span></span>、图标）仍在行内格式化上下文中排布。此时line-height依然生效，但它作用的对象是“行框（line box）”，而这个行框的基线和高度会受浮动元素干扰——尤其当浮动块高度与当前行高不匹配时，浏览器会为容纳浮动而拉伸或压缩行框，导致文字视觉上“吊高”“下沉”或“挤在一起”。这不是line-height坏了，而是它在浮动语境下失去了稳定参考。
修复line-height失真的三个实操要点
核心思路：稳住行框高度、切断浮动对基线的拖拽、让容器有明确高度锚点。
- 给浮动元素的**直接父容器**设明确的
line-height（推荐无单位值，如line-height: 1.5），而不是只设在文字或图标上；否则浮动项和文字各行其是 - 浮动图片或图标必须加
vertical-align: top（默认baseline会预留下降部空间，放大错位）；若已用字体图标，建议同时设display: inline-block - 父容器必须触发BFC，否则高度塌陷会让行框失去排布基准——优先用
display: flow-root，兼容旧版可上.clearfix::after { content: ""; display: block; clear: both; }
别踩这些line-height常见坑
很多调试失败是因为改错了地方或用了无效组合：
-
vertical-align对float: left的块级元素完全无效——它只影响inline或inline-block元素 -
line-height: 0或font-size: 0这类hack只适用于解决浮动间**水平间隙**，对行高失真没用，反而会让文字消失 - 给浮动元素自身设
line-height意义不大，因为它已脱离行内流；真正要控的是它周围文字所在的那个行框 - 用
px写line-height（如line-height: 24px）会导致字号变化后失衡，响应式场景尤其明显
现代替代方案：什么时候该放弃float
如果你的目标只是图文并排、导航栏图标对齐、卡片列表等常见场景，float不是必须的。这些布局在display: flex或display: grid下天然规避了行高失真问题：
-
flex容器中，align-items: center能真正让图标和文字垂直居中，不依赖line-height模拟 -
grid配合place-items: center或align-content，对多行文本+浮动图的混排更可控 - 两者都自动创建BFC，无需手动
clear或flow-root，也不存在HTML空白字符引发的4px间隙
复杂点在于：如果项目还在维护IE9–10，或需兼容某些老旧CMS模板生成的结构，就得在float上做精细控制——这时务必记住：line-height不是调错位置的橡皮泥，它是行框的标尺，得从父容器和BFC两个维度一起校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
