line-height 应使用无单位数值（如1.4）而非px/em，确保随font-size动态缩放；响应式中需同步调整font-size与line-height；Flex/Grid重叠多因容器约束而非行高问题。
line-height 写成 px 值是重叠主因
浏览器计算行高时，line-height: 20px 就是死的 20 像素，不管当前 font-size 是 14px 还是 40px。小屏下字号被 clamp() 或媒体查询压到 16px，但行高还是 20px，看似够用；可一旦加粗或换字体，字形下沉/上升量变大，实际渲染高度就可能突破 20px，上下行立刻咬合。
绝对单位（px、em）在响应式场景中本质是“静态锚点”，和缩放逻辑天然冲突。真正可靠的只有无单位数值，比如 line-height: 1.4，它永远是当前 font-size 的 1.4 倍。
- 删掉所有
line-height: 20px、line-height: 1.2em这类写法 - 统一替换成
line-height: 1.4、line-height: 1.55等无单位值 - 若必须精细控制节奏（如对齐设计稿的 8px 垂直网格），改用
line-height: clamp(1.2, 4vw, 1.6)
媒体查询里只调 font-size 不调 line-height 会失效
常见错误写法：@media (max-width: 480px) { p { font-size: 14px; line-height: 1.2; } }。表面看字号小了、行高也设了，但 14px × 1.2 = 16.8px 行高，而多数中文字体（如 PingFang SC、Noto Sans CJK）在 14px 下基线到顶的实际高度已接近 17–18px，加粗后更甚——结果就是字挨着字，甚至上下行字形直接覆盖。
务必让 line-height 和 font-size 在同一作用域内声明，避免分离维护。
- 推荐组合：
font-size: clamp(16px, 4vw, 24px); line-height: 1.4; - 或在媒体查询中同步设两者：
@media (max-width: 768px) { body { font-size: 14px; line-height: 1.5; } } - 检查 computed 样式里
line-height的像素值是否明显小于字体高度（比如字体 16px，行高却只有 17px）
Flex/Grid 容器里文字重叠不是行高问题
即使 line-height 设置正确，display: flex 或 display: grid 容器仍可能让文字视觉重叠——这不是行高问题，而是 align-items: center 或 justify-content: center 把多行文本强行挤进一个垂直中心点，尤其当容器高度被固定或受 max-height 限制时。
打开 devtools 会发现元素高度远小于预期，line-height 显示正常，但容器本身没给足空间。
- 临时把父容器
align-items改成flex-start看是否缓解 - 检查父容器是否设置了
height或max-height，尤其带overflow: hidden的卡片类组件 - Flex 中子项若设了
align-self: flex-start又没撑开高度，行高就失去作用空间
浮动或绝对定位导致重叠要先清流再调行高
浮动布局中，父容器高度塌陷会使后续文字从浮动元素底部起排，line-height 再大也压不住——因为根本没给它“可排布的空间”。绝对定位同理：脱离文档流后，兄弟元素无法感知其占位，容易叠上去。
这时候单独调 line-height 只会让重叠的文字行更高，但依然重叠，甚至更丑。
- 浮动场景：给后续兄弟元素加
clear: both，或给父容器触发 BFC（如display: flow-root） - 绝对定位场景：改用 Flexbox 或 Grid 布局替代，或确保定位容器有明确
height/min-height并设overflow: visible - 检查图文叠加区域的偏移值是否用了固定
px，应改用rem或视口单位（如top: 2vh）
重叠问题往往不是单一属性失控，而是 line-height、font-size、容器约束、定位方式几者叠加失配的结果。最容易被忽略的是：你调了行高，但没确认它是否真正在生效——computed 样式里那个像素值，才是最终说话的依据。
