float 不会让文字行高“失真”，而是使行框高度被重新计算；浮动元素脱离文档流后，其基线与文字对齐，隐式行高常撑开整行，需用 line-height 和 vertical-align 协同调整。
float 会让文字行高“失真”吗？
不是失真，是行框（line box）高度被重新计算了。当一个元素设 float: left 后，它脱离文档流，但旁边的内联内容（比如文字）仍会形成行框——而这个行框的高度，取决于该行中所有内联盒子的最大“行高贡献值”。如果浮动元素本身没显式设置 line-height，浏览器会按其字体、font-size 和默认基线推算出一个隐式行高，常比周围文字高，导致整行被撑开。
- 常见现象：图标左浮动后，右侧文字第一行明显下沉，第二行才“贴上去”
- 根本原因：浮动元素的基线（baseline）和文字默认对齐，而大尺寸图标或首字的 baseline 实际位置偏低
- 关键点：
line-height不作用于浮动元素自身高度，但它会影响它所在行的行框高度——哪怕它已脱离流
用 line-height 统一浮动区域的垂直节奏
给浮动元素的父容器或直接给浮动元素本身设 line-height，是最直接的干预方式。重点不是“让文字居中”，而是让所有参与该行排版的内联盒子共享一致的行框基准。
- 优先用无单位值，如
line-height: 1.4，避免字号变化时失效 - 若父容器高度固定（如
height: 48px），可设line-height: 48px强制单行文字视觉居中，但需确保浮动元素高度 ≤ 48px，否则行框仍会被撑高 - 对浮动的图片或图标，建议额外加
vertical-align: middle，否则即使line-height一致，基线错位仍会导致文字偏上/偏下 - 不要只设
line-height就完事——检查浮动元素是否自带margin或padding，它们也会影响实际占位
为什么 float + line-height 还是不对齐？常见坑
很多调试失败，是因为忽略了三个隐性依赖关系：基线、行框范围、继承链。尤其在混排中文字体、图标字体、SVG 时，line-height 只是起点，不是终点。
-
vertical-align缺失：浮动的img默认vertical-align: baseline，而中文文字的 baseline 比英文字体低，结果就是图标“悬”在文字上方 - 字体差异干扰：思源黑体和微软雅黑的 x-height 不同，同样
font-size: 14px; line-height: 1.4，实际行框高度可能差 2px - 伪元素干扰：用
::first-letter浮动首字时，若前面有空格或换行，::first-letter不生效，line-height调整就全白费 - 移动端缩放：小屏下
line-height: 1.4可能导致行距过紧，建议配合@media (max-width: 768px)单独调为1.5或加min-height
更稳的替代方案：别硬刚 float
如果你的目标只是“图标+文字水平排列且垂直对齐”，float 是过时解法。现代布局中，display: flex 几乎零配置就能绕过所有 line-height 计算陷阱。
- 父容器加
display: flex; align-items: center;，文字和图标自动中线对齐，无需line-height、vertical-align或margin微调 - 兼容性够用：Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+，IE10+ 需加
-ms-前缀（但 IE 已淘汰） - 响应式友好：配合
flex-wrap和gap，比浮动 + clearfix +line-height组合更易维护 - 注意：若必须支持 IE9 及以下，才需要退回
float方案，并老老实实调line-height和vertical-align
真正难的从来不是怎么调 line-height，而是判断什么时候该放弃它——尤其是当你发现要同时改 margin-top、line-height、vertical-align 和字体栈才能让一行文字“看起来对齐”时，大概率说明布局模型已经绷得太紧了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
