::first-letter静默失效因父元素flex/grid、首字符前有空白或被内联标签包裹、以全角标点开头；必须同时设置float: left、显式line-height: 0.75（无单位）、font-size≥2.5em，且父容器需overflow: hidden清除浮动。
为什么写了::first-letter却完全没反应
浏览器不是报错，而是直接静默忽略——::first-letter规则在 DevTools 里能看到，但 computed 样式为空。常见原因有：
父容器用了display: flex或display: grid，文本流被切断；
HTML 中首字符前有换行、空格、<!-- 注释 -->或零宽字符（比如富文本编辑器插入的）；
首字被<strong>、<em>等内联标签包裹；
段落以《、【、“、」等全角标点开头，伪元素选中的是标点而非汉字。
::first-letter真正下沉必须配齐的三个样式
光写font-size只会撑高整行，不是下沉。要让文字自然绕排、视觉沉入段落，三者缺一不可：float: left：唯一触发环绕的属性，不加它，后续文字始终从首字右侧平齐开始；line-height: 0.75（无单位）：必须显式设置，继承父级line-height: 1.6会让放大后的首字像竖砖立着，文字只能从它“头顶”绕；font-size: 2.8em（中文建议≥2.5em；可用clamp(2rem, 4vw, 3.5rem)响应式适配）。
父容器必须加overflow: hidden清除浮动
不处理浮动，
高度会塌陷，后续段落会上移重叠：overflow: hidden是最轻量、兼容性最好的清除方式；
别用clear: both——需额外 DOM 节点；
慎用display: flow-root——Safari 15.4 之前不支持；
如果父容器本身是flex或grid，加清除也没用，::first-letter已失效，得把段落移出该容器。
中文场景下最容易被忽略的细节
中文没有大小写和稳定基线，纯 CSS 几乎无法兜底：
全角标点开头时，::first-letter无法跳过它选第二个字——服务端需用正则/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/预处理，或前端 JS 动态包裹首个汉字；
思源宋体等字体 ascender 偏高，仅调line-height不够，可加margin-bottom: -0.2em微调，但margin-top易触发新 BFC 导致整段偏移；
某些字体（如手写体、细黑体）放大后字形发虚或撑破行框，优先选"PingFang SC"、"Noto Sans CJK SC"这类结构稳定的字体。
立即学习“前端免费学习笔记（深入）”；
