文字被切割是浮动致父容器塌陷与行框计算失准双重所致；line-height 增大会抬高行框，使其顶部撞上浮动元素底边而“削顶”。
文字被切割不是字体或渲染问题，而是浮动导致父容器高度塌陷 + 行框（line box）计算失准的双重结果；单独调 line-height 可能让文字更高，但切得更狠。
为什么调整 line-height 会让文字看起来更“割”
浮动元素脱离文档流后，父容器若没触发 BFC 或清除浮动，高度往往坍缩为 0。此时后续文字的行框会以浮动元素底部为基准向上排布——line-height 越大，行框越高，顶部就越容易撞上浮动块的底边，造成首行文字被“削顶”。这不是截断（overflow: hidden 那种），而是行框被强行压进浮动块下方的狭窄空间里。
常见表现：
- 图片
float: left后，右侧第一行文字顶部缺了一截，像被刀切过 - 开发者工具里选中该行文字，
height显示正常，但视觉上顶部像素丢失 - 加
margin-top: 2px没用，加padding-top: 2px也没用——因为根本没给它“可 padding 的空间”
真正起效的三步操作（顺序不能乱）
先稳住容器高度，再理清行框起点，最后微调视觉对齐：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
display: flow-root（最简 BFC 触发方式，兼容 Chrome 64+/Firefox 59+/Safari 15.4+） - 或用伪元素清除：在父容器末尾加
::after { content: ""; display: table; clear: both; } - 确保浮动元素本身有明确高度参考：比如
img加vertical-align: top，避免 baseline 留白；若为div，显式设height或min-height - 此时再设
line-height才有意义——推荐无单位值，如line-height: 1.5，而非line-height: 24px
line-height 和 height 的配合陷阱
很多人试图用 height 包裹文字容器来“撑高”，但若父容器仍塌陷，height 会被忽略或压缩。更危险的是：line-height 大于 height 时，文字必然溢出被裁剪（尤其在 Safari 中更敏感）。
- 若容器设了
height: 32px，就别设line-height: 1.8（假设字号 16px → 实际行框约 28.8px，尚可）；但设成line-height: 2就超了 - 检查 computed 样式中的
line-height实际值——有时继承自body的line-height: normal在不同浏览器下解析为 1.1~1.2，不可靠 - 文字被切的位置往往对应浮动元素的
bottom像素值，用 DevTools 的 Layout 面板勾选 “Show layout bounds”，一眼就能看出行框是否正卡在浮动块底边线上
现代项目里最省事的替代方案
如果你控制得了 HTML 结构和浏览器支持范围，直接弃用 float：
- 图文并排：父容器
display: flex; align-items: flex-start;，图片加margin-right: 8px - 多列卡片：用
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) - 旧代码迁移时，优先改父容器，不要动每个浮动子项的
line-height——那只是在补洞，不是修墙
真正难处理的，是那些嵌在富文本编辑器输出里的浮动图片，它们自带 style="float:left" 且无法改结构。这时候，display: flow-root 是唯一不破坏语义、也不依赖 JS 的解法。
