必须协同设置 font-size、float: left 和 line-height 才能实现首字下沉，仅 float: left 会导致首字“浮在行顶”，文字从其头顶绕排；line-height 需显式设为 0.7–0.9（推荐 0.75），font-size 建议 ≥2.8em，且需避开 flex/grid、开头标点、内联标签等结构陷阱。
只写 font-size 和 float: left 无法实现真正下沉，必须协同控制 line-height、font-size 和浮动行为，否则首字会“浮在行顶”，文字从它头顶平齐绕排，视觉上完全不沉。
为什么加了 float: left 还是不“沉”
::first-letter 渲染出来是一个内联盒，它默认继承父 的 line-height: 1.6。放大后，这个盒子自身行框被拉高，像一块竖砖立在开头；float: left 虽让它脱离文档流，但若不压低它自己的行高，后续文字只能从它“头顶”绕排，根本不会咬合下沉。
-
line-height必须显式设为0.7–0.9（无单位），不能留空或靠继承 - 中文推荐从
0.75起试；低于0.65可能截断思源黑体等字体的顶部字形 - 高于
0.95容易顶开下一行，造成段落间距异常
::first-letter 静默失效的三大结构陷阱
DevTools 里看不到 computed 样式，不是选择器写错，而是浏览器直接忽略——它对 DOM 结构极其敏感：
- 父元素用了
display: flex或display: grid：文本流中断，伪元素静默失效 - 首字符前有换行、空格、HTML 注释（如
\n今天
今天
- 首字符被
、等内联标签包裹（如今天
- 段落以《、【、“等全角标点开头时，
::first-letter选中的是标点而非汉字，结果引号被放大三倍并严重溢出
关键参数怎么配才不翻车
真正起作用的是三者协同，缺一不可：
-
float: left：唯一能触发文字环绕的属性；不加它，只是变大，不是下沉 -
font-size建议 ≥2.8em（中文固定值）或响应式写法clamp(2rem, 4vw, 3.5rem)；2em在多数中文字体下视觉无下沉感 -
line-height: 0.75：必须显式设置；继承值会导致放大后整行被顶高 -
margin-right: 0.2em控制与正文间距；慎用margin-top，不同字体基线差异大，实测调整更稳 - 父
推荐加overflow: hidden清除浮动，比clear: both更轻量且避免 DOM 污染
中文场景下最常忽略的硬伤
复杂点不在样式本身，而在首字符的“真实性”——它必须是 DOM 文本流中第一个可渲染的汉字，且不受任何布局或预处理干扰：
- ::first-letter 无法跳过开头标点选第二个字；CMS 或用户输入若以《开头，前端必须预处理（如正则
/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/移除） - 某些富文本编辑器插入内容时自带零宽空格或换行符，上线前必须检查真实 DOM，不能只测“今天天气好”这种理想 case
- 思源宋体等字体 ascender 偏高，仅调
line-height不够，需加margin-bottom: -0.2em微调；慎用margin-top，可能触发新 BFC 导致整段偏移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
