真正实现首字下沉需同时满足结构、内容、样式三重条件：父容器不能是flex/grid；段落首字符必须为有效汉字且无前置空白或标签；样式上必须同时设置float:left、line-height:0.75、font-size≥2.5em，并加overflow:hidden清除浮动。
只写 ::first-letter { font-size: 3em; } 不会下沉，只会撑高整行——真正“沉下去”必须同时满足结构、内容、样式三重条件。
为什么写了 ::first-letter 却完全没反应
不是选择器错了，而是浏览器静默跳过渲染：它对 DOM 结构极其敏感，不满足硬性前提就直接忽略，DevTools 里连 computed 样式都为空。
- 父容器用了
display: flex或display: grid—— 文本流中断，伪元素失效 -
<p>开头有换行、空格、<!-- 注释 -->或零宽字符（富文本编辑器常插入） - 首字被
<strong>、<span>等内联标签包裹，伪元素无法穿透 - 段落以《、【、“、”等全角标点开头，
::first-letter选中的是标点而非汉字，结果引号被放大溢出
::first-letter 必须配齐的三个样式
缺一不可。单改 font-size 或只加 color，只会让首字变大、行高错乱，不是下沉。
-
float: left：唯一能触发文字环绕的属性；不加它，后续文字从首字右侧平齐开始排 -
line-height: 0.75（无单位）：必须显式设置；继承父级line-height: 1.6会让放大后的首字像竖砖立着，文字只能从它“头顶”绕 -
font-size: clamp(2rem, 4vw, 3.5rem)：中文建议 ≥2.5em；固定值2em在多数字体下视觉无下沉感
父容器必须加 overflow: hidden 清除浮动
不处理浮动，<p> 高度会塌陷，后续段落会上移重叠。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden是最轻量、兼容性最好的清除方式 - 别用
clear: both——需额外 DOM 节点，且位置难控 - 慎用
display: flow-root——Safari 15.4 之前不支持 - 如果父容器本身是
flex或grid，加清除也没用：::first-letter已失效，得把段落移出该容器
中文场景下最容易被忽略的细节
中文没有大小写和稳定基线，纯 CSS 几乎无法兜底——麻烦不在样式本身，而在首字符是否“真实”。
-
::first-letter无法跳过开头标点选第二个字；CMS 或用户输入若以《开头，必须服务端正则预处理，或前端 JS 动态提取首个汉字并包裹 - 思源宋体等字体 ascender 偏高，仅调
line-height不够，可加margin-bottom: -0.2em微调；但margin-top易触发新 BFC 导致整段偏移 - 某些字体（如手写体、细黑体）放大后字形发虚或撑破行框，优先选
"PingFang SC"、"Noto Sans CJK SC"这类结构稳定的字体 - 富文本插入的内容常带隐藏字符，上线前必须检查真实 DOM，不能只测
<p>今天天气好</p>这种理想 case
