::first-letter 下沉需同时设置 float: left、line-height: 0.75（无单位）和 font-size；父段落加 overflow: hidden 清除浮动；line-height 过高会撑行，过低截字形，中文建议从 0.75 起调。
为什么只写 ::first-letter { font-size: 3em; } 完全不“沉”
它根本不是放大就下沉，而是会把整行撑高、第二行文字被顶开甚至重叠。因为 ::first-letter 默认生成一个内联盒，继承父段落的 line-height: 1.6；放大后这个盒子自身行框高度剧增，像一块竖砖立在开头。浮动只是让它脱离文档流，但没压低它自己的行高，文字只能从它“头顶”绕排。
必须显式设 line-height: 0.75（无单位），不能留空或靠继承；低于 0.6 可能截断字形顶部，中文建议从 0.75 起试。
::first-letter 静默失效的三大常见原因
浏览器不是报错，而是直接忽略——它对 HTML 结构极其敏感：
- 父
<p></p>被套在display: flex或display: grid容器里，文本流中断 - 首字符前有换行、空格、
<!-- 注释 -->，例如<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> - 段落以《、【、“等全角标点开头，
::first-letter选中的是标点而非汉字
纯 CSS 无法跳过标点选第二个字。上线前务必检查真实 CMS 内容，必要时用正则 /^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/ 预处理移除开头标点。
浮动 + 行高 + 清除塌陷的最小可靠组合
这三个样式必须同时存在，缺一不可：
-
float: left：唯一触发文字自然环绕的属性；不加它，首字只是变大，不“沉” -
line-height: 0.75：必须是无单位数值；继承值会让放大后的首字撑开整行 -
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐；固定值至少2.5em，2em在多数中文字体下视觉无下沉感
父 <p></p> 必须加 overflow: hidden 清除浮动，否则高度塌陷，后续段落会上移重叠。比 clear: both 更轻量，也不增加 DOM 节点。
中文排版里最易被忽略的垂直间隙控制点
下沉字底部紧贴第二行文字，不是靠 margin-bottom 能解决的——浮动元素的外边距不影响后续行盒布局。真正有效的控制只有两个：
- 下调下沉字自身的
line-height（如0.75），压缩其参与行盒高度计算的占比 - 给段落整体加
padding-top: 0.2em，为下沉字顶部预留空间，避免顶到上一段落末尾
不同中文字体的 ascender/descender 差异极大，同一套 line-height 在思源黑体和宋体下表现可能差一倍。上线前务必在真实字体下实测，别只看开发机默认字体。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
