真正实现首字下沉必须同时满足三个条件：父元素为块级且未被flex/grid破坏文本流、首字符是纯文本汉字（前无空格/换行/注释/内联标签）、样式配齐float:left+line-height:0.75+font-size≥2.5em。
光写 ::first-letter { font-size: 3em; } 不会下沉，只会把首字撑大、顶开第二行；真正“沉下去”必须同时满足三个硬性条件：父元素是块级且未被 flex/grid 破坏文本流、首字符是纯文本汉字（前无空格/换行/注释/内联标签）、样式配齐 float: left + line-height: 0.75（无单位）+ font-size: ≥2.5em。
为什么写了 ::first-letter 却完全没反应
浏览器不是报错，而是静默忽略——它对 DOM 结构极其敏感：
- 父
被套在display: flex或display: grid容器里，文本流中断 - HTML 中首字符前有换行、空格、
或零宽字符（如富文本编辑器插入的） - 首字被
、等内联标签包裹，例如今天…
- 段落以《、【、“、」等全角标点开头，伪元素选中的是标点而非汉字，结果引号被放大三倍溢出
::first-letter 必须配齐的三个核心样式
缺一不可，单改一个大概率错位或顶开下一行：
-
float: left：唯一能触发文字环绕的属性；不加它，首字只是变大，正文不会绕排 -
line-height: 0.75（无单位）：必须显式设置；继承父级line-height: 1.6会让放大后的首字像竖砖立着，文字只能从它“头顶”绕排 -
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐；固定值至少用2.5em，2em在多数中文字体下视觉下沉感极弱
父容器必须加 overflow: hidden 清除浮动
不处理浮动，高度会塌陷，后续段落会上移重叠：
-
overflow: hidden是最轻量、兼容性最好的清除方式 - 别用
clear: both——需额外 DOM 节点 - 慎用
display: flow-root——Safari 15.4 之前不支持 - 如果父容器本身是
flex或grid，加清除也没用，::first-letter已失效，得把段落移出该容器
中文场景下最容易被忽略的是：全角标点开头时，::first-letter 无法跳过它选第二个字；服务端需正则预处理，或前端 JS 动态包裹首个汉字——否则你看到的永远是放大的《或“，而不是“今”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
