::first-letter实现首字下沉必须协同float:left、line-height:0.75（无单位）和font-size≥2.5em；失效主因是父容器为flex/grid、首字符前有空白/注释/内联标签或中文标点开头。
::first-letter 伪元素专为“首字下沉”这类排版需求设计，但它不是写了 font-size 就自动下沉——不配 float: left、不压 line-height、不清除浮动，它就只是个被放大的普通字符。
为什么 ::first-letter 写了却没反应？
浏览器不是报错，而是静默跳过：它只在严格条件下触发。常见失效场景包括：
- 父容器用了
display: flex或display: grid—— 文本流被切断，伪元素直接不生成 - HTML 中首字符前有换行、空格、
<!-- 注释 -->或零宽字符（富文本编辑器常插） - 首字被
<strong></strong>、<em></em>等内联标签包裹，::first-letter选不到原始文本节点 - 段落以《、【、“等全角标点开头，伪元素选中的是标点而非汉字，结果引号被放大三倍溢出
::first-letter 真正下沉必须配齐哪三个样式？
单改一个大概率崩布局，三者缺一不可：
-
float: left：唯一能触发文字环绕的属性；不加它，后续文字从首字右侧平齐开始，不是“沉”而是“立” -
line-height: 0.75（无单位）：必须显式设置；继承父级line-height: 1.6会让放大后的首字像竖砖顶高整行 -
font-size: clamp(2rem, 4vw, 3.5rem)：中文建议 ≥2.5em；固定值2em在多数字体下视觉无下沉感
父容器为什么非得加 overflow: hidden？
float: left 会让首字脱离文档流，父容器若不处理浮动，高度会塌陷——后续段落直接上移重叠。此时：
-
overflow: hidden是最轻量、兼容性最好的清除方式（IE6+ 都支持） - 别用
clear: both：需额外 DOM 节点，破坏语义 - 慎用
display: flow-root：Safari 15.4 之前不支持，且部分旧安卓 WebView 也不认 - 如果父容器本身是
flex或grid，加清除也没用——::first-letter已失效，得把段落移出该容器
复杂点不在 CSS 写法本身，而在于“首字符”的真实性：它必须是 DOM 文本流中第一个可渲染的汉字，不能是标点、不能被包裹、不能前面藏空格。上线前务必用真实 CMS 数据验证，别只测 <p>今天天气好</p> 这种理想 case。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
