真正实现首字下沉必须同时满足三个条件：父元素为块级且未被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 结构极其敏感：
- 父
<p></p>被套在display: flex或display: grid容器里，文本流中断 - HTML 中首字符前有换行、空格、
<!-- 注释 -->或零宽字符（如富文本编辑器插入的） - 首字被
<strong></strong>、<em></em>等内联标签包裹，例如<p><strong>今</strong>天…</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a> <p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 段落以《、【、“、」等全角标点开头，伪元素选中的是标点而非汉字，结果引号被放大三倍溢出
::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 动态包裹首个汉字——否则你看到的永远是放大的《或“，而不是“今”。
