真正实现首字下沉必须同时设置 float: left、显式 line-height（如 0.75）和父容器清除浮动；仅用 ::first-letter 放大首字会导致行高异常，因它默认继承父级 line-height 而未脱离文档流。
只写 ::first-letter { font-size: 3em; } 不会“下沉”，只会让首字变大并撑乱整段行高；真正下沉必须强制 float: left + 显式 line-height + 清除父容器浮动三者协同。
为什么首字变大了却不“沉”
根本不是样式没生效，而是浏览器把 ::first-letter 渲染成一个内联盒，它默认继承父段落的 line-height（比如 1.6）。放大后，这个内联盒自身行框被拉高，直接顶开第二行文字——看起来像错位、换行、甚至段落重叠。
关键点在于：float: left 让它脱离文档流，但若不压低它自己的行高，它就像一块竖着的砖头立在开头，文字只能从它“头顶”开始绕。
-
line-height必须显式设为0.7–0.9（无单位），不能留空或靠继承 - 数值低于
0.6可能截断字形顶部，高于0.95就容易顶开下一行 - 中文建议从
0.75起试，英文可略高（0.8–0.85）
::first-letter 静默失效的硬性前提
它不是选择器写错了才不生效，而是环境不合规时直接被浏览器忽略——DevTools 里都看不到 computed 样式。
立即学习“前端免费学习笔记（深入）”；
- 父元素必须是块级：如
<p>默认符合，但若加了display: flex或display: grid，立刻失效 - 首字符前不能有空白：HTML 中
<p>\n 今天…</p>或<p><!-- 注释 -->今天…</p>全部失效 - 首字符不能被内联标签包裹：
<p><strong>今</strong>天…</p>中的::first-letter选不到“今” - 中文以标点开头（如《、【、“）时，伪元素会选中标点而非汉字——结果是引号被放大三倍
必须同步写的三个核心样式
缺一不可，单改一个大概率崩布局：
-
float: left：唯一触发文字环绕的属性，不加它就只是放大，不是下沉 -
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐写法；固定值至少2.5em，2em在多数中文字体下视觉无下沉感 -
line-height: 0.75：压住首字自身行框高度，避免撑开整行；注意必须是无单位数值
额外建议：margin-right: 0.2em 控制与正文间距，比用空格或 padding 更稳定；父 <p> 加 overflow: hidden 清除浮动，比 clear: both 更轻量。
中文场景下最易忽略的细节
中文没有 ascender/descender 概念，基线位置浮动大，字体间差异远超英文：
- 别用思源黑体、手写体等字形伸展剧烈的字体做首字——首选 “PingFang SC”、“Noto Sans CJK SC” 等结构稳定的字体
- 若首字底部悬空，优先用
margin-bottom: -0.15em往下拉，比margin-top安全（后者可能意外触发新 BFC） - 标点开头无法靠 CSS 跳过，服务端正则预处理或前端 JS 动态包裹首汉字更可靠，例如匹配
/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/并移除 -
text-transform对中文无效，且若父元素设了该属性，::first-letter作用的是转换后的结果——这点在多语言混排时极易踩坑
复杂点不在代码量，而在每处微调都受字体、浏览器渲染引擎、DOM 结构三重制约；上线前务必用真实字体 + 真实设备组合验证，别信模拟器。
