真正下沉首字必须用 float: left 触发文字环绕，仅 font-size 放大无效；需同时满足父元素非 flex/grid、首字符无前置空白或标签包裹、且协同设置 float: left、line-height: 0.75 和足够大的 font-size。
为什么只写 ::first-letter { font-size: 3em; } 不会下沉
它只是把首字变大，但没触发文字环绕——浏览器把它当做一个普通内联盒，继承父段落的 line-height: 1.6，结果首字被拉高、顶开第二行，视觉上“浮”在段首。真正下沉必须靠 float: left 让它脱离文档流，再用 line-height 压低自身行框高度，否则正文只能从它头顶绕。
::first-letter 静默失效的三大结构前提
DevTools 里看不到 computed 样式，大概率不是选择器写错，而是 DOM 结构不满足硬性条件：
- 父元素不能是
display: flex或display: grid—— 文本流一断，伪元素直接被忽略 - 首字符前不能有换行、空格、HTML 注释（如
<p>\n今天</p>或<p><!-- 注释 -->今天</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>） - 首字符不能被
<strong></strong>、<span></span>等内联标签包裹；中文以《、【、“开头时，伪元素会选中标点而非汉字，导致放大溢出
必须协同设置的三个核心样式
缺一不可，单改一个就崩布局：
-
float: left：唯一能触发文字环绕的属性；不加它，就是纯放大 -
line-height: 0.75（无单位）：必须显式设，数值低于 0.6 可能截顶，高于 0.95 容易顶开下一行；中文建议从 0.75 起试，英文可略高（0.8–0.85） -
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐写法；固定值至少2.5em，2em在多数中文字体下视觉无下沉感
额外建议：margin-right: 0.2em 控制与正文间距；父 <p></p> 加 overflow: hidden 清浮动，比 clear: both 更轻量。
中文场景下最易被忽略的渲染细节
同一套 CSS 在“苹方”“微软雅黑”“HarmonyOS Sans”下下沉位置可能差半个字高；text-transform: uppercase 对中文无效且干扰渲染；JS 动态插入富文本后，::first-letter 不会自动重生效；标点开头或带拼音的段落，部分浏览器会跳过汉字选中书名号——这些都不是 bug，是字体度量和浏览器实现差异的真实表现。真要 100% 可控，得放弃伪元素，改用显式 HTML 结构（如 <span class="dropcap">春</span>风拂面…
