真正实现首字下沉必须同时设置 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></p>默认符合，但若加了display: flex或display: grid，立刻失效 - 首字符前不能有空白：HTML 中
<p>\n 今天…</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>或<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></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 结构三重制约；上线前务必用真实字体 + 真实设备组合验证，别信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
