结论：仅写 ::first-letter { font-size: 3em; } 不会下沉，真正“沉下去”需同时满足三个硬性条件：父元素为块级且未被 flex/grid 破坏文本流、首字符是纯文本汉字（非标签包裹、前无空格/注释）、样式必须配齐 float: left + line-height: 0.75（无单位）+ font-size ≥ 2.5em。
直接说结论：仅写 ::first-letter { font-size: 3em; } 不会下沉，只会撑开行高、顶开第二行文字；真正“沉下去”必须同时满足三个硬性条件：父元素是块级且未被 flex/grid 破坏文本流、首字符是纯文本汉字（不能被 <strong></strong> 包裹或前面有空格/注释）、样式上必须配齐 float: left + line-height: 0.75（无单位）+ font-size ≥ 2.5em。
为什么写了 ::first-letter 却完全没反应
不是选择器写错，而是浏览器直接忽略——它对 HTML 结构极其敏感，常见静默失效场景包括：
- 父
<p></p>被套在display: flex或display: grid容器里，文本流中断 - HTML 中首字符前有换行、空格、
<!-- 注释 -->，例如<p>\n今天…</p> - 首字被
<strong></strong>、<em></em>等内联标签包裹，如<p><strong>今</strong>天…</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 段落以《、【、“等全角标点开头，
::first-letter选中的是标点而非汉字，结果引号被放大三倍溢出
float: left 加了还是不“沉”，问题出在哪
根本原因是 ::first-letter 渲染为一个内联盒，默认继承父段落的 line-height: 1.6。放大后，这个盒子自身行框被拉高，像一块竖砖立在开头；float: left 虽让它脱离文档流，但若不压低它自己的行高，文字只能从它“头顶”绕排。
-
line-height必须显式设为0.7–0.9（无单位），不能留空或靠继承 - 中文建议从
0.75起试，低于0.6可能截断字形顶部 - 父
<p></p>必须加overflow: hidden清除浮动，否则高度塌陷，后续段落会上移重叠
中文新闻排版中最容易踩的坑
中文没有大小写和明确基线，标点干扰强、字体差异大，纯 CSS 几乎无法兜底：
-
::first-letter无法跳过标点选第二个字——CMS 或用户输入若以《开头，前端必须预处理，例如用正则/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/移除开头标点 - 思源宋体等字体 ascender 偏高，仅调
line-height不够，需加margin-bottom: -0.2em微调；慎用margin-top，可能触发新 BFC 导致整段偏移 - 某些富文本编辑器插入内容时自带零宽空格或换行符，上线前必须检查真实 DOM 结构，不能只测“今天天气好”这种理想 case
复杂点不在样式本身，而在首字符的“真实性”——它必须是 DOM 文本流中第一个可渲染的汉字，且不受任何布局容器或预处理逻辑干扰。只要结构稍有偏差，::first-letter 就彻底静默，连 DevTools 都不显示 computed 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
