必须协同设置 font-size、float: left 和 line-height 才能实现首字下沉，仅 float: left 会导致首字“浮在行顶”，文字从其头顶绕排；line-height 需显式设为 0.7–0.9（推荐 0.75），font-size 建议 ≥2.8em，且需避开 flex/grid、开头标点、内联标签等结构陷阱。
只写 font-size 和 float: left 无法实现真正下沉，必须协同控制 line-height、font-size 和浮动行为，否则首字会“浮在行顶”，文字从它头顶平齐绕排，视觉上完全不沉。
为什么加了 float: left 还是不“沉”
::first-letter 渲染出来是一个内联盒，它默认继承父 <p></p> 的 line-height: 1.6。放大后，这个盒子自身行框被拉高，像一块竖砖立在开头；float: left 虽让它脱离文档流，但若不压低它自己的行高，后续文字只能从它“头顶”绕排，根本不会咬合下沉。
-
line-height必须显式设为0.7–0.9（无单位），不能留空或靠继承 - 中文推荐从
0.75起试；低于0.65可能截断思源黑体等字体的顶部字形 - 高于
0.95容易顶开下一行，造成段落间距异常
::first-letter 静默失效的三大结构陷阱
DevTools 里看不到 computed 样式，不是选择器写错，而是浏览器直接忽略——它对 DOM 结构极其敏感：
- 父元素用了
display: flex或display: grid：文本流中断，伪元素静默失效 - 首字符前有换行、空格、HTML 注释（如
<p>\n今天</p> <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><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><!-- intro -->今天</p>） - 首字符被
<strong></strong>、<em></em>等内联标签包裹（如<p><strong>今</strong>天</p>） - 段落以《、【、“等全角标点开头时，
::first-letter选中的是标点而非汉字，结果引号被放大三倍并严重溢出
关键参数怎么配才不翻车
真正起作用的是三者协同，缺一不可：
-
float: left：唯一能触发文字环绕的属性；不加它，只是变大，不是下沉 -
font-size建议 ≥2.8em（中文固定值）或响应式写法clamp(2rem, 4vw, 3.5rem)；2em在多数中文字体下视觉无下沉感 -
line-height: 0.75：必须显式设置；继承值会导致放大后整行被顶高 -
margin-right: 0.2em控制与正文间距；慎用margin-top，不同字体基线差异大，实测调整更稳 - 父
<p></p>推荐加overflow: hidden清除浮动，比clear: both更轻量且避免 DOM 污染
中文场景下最常忽略的硬伤
复杂点不在样式本身，而在首字符的“真实性”——它必须是 DOM 文本流中第一个可渲染的汉字，且不受任何布局或预处理干扰：
- ::first-letter 无法跳过开头标点选第二个字；CMS 或用户输入若以《开头，前端必须预处理（如正则
/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/移除） - 某些富文本编辑器插入内容时自带零宽空格或换行符，上线前必须检查真实 DOM，不能只测“今天天气好”这种理想 case
- 思源宋体等字体 ascender 偏高，仅调
line-height不够，需加margin-bottom: -0.2em微调；慎用margin-top，可能触发新 BFC 导致整段偏移
