::first-letter + clamp() 配合 float: left 是最稳的响应式首字下沉方案，但需同步设置 line-height 和父容器清除浮动，否则只放大不“沉”；单独用 font-size: clamp() 无效，因未脱离流且行框未压缩。
::first-letter + clamp() 配合 float: left 是目前最稳的响应式首字下沉方案，但必须同步设置 line-height 和父容器清除浮动，否则只放大不“沉”。
为什么 font-size: clamp() 单独用没用
只写 font-size: clamp(2rem, 4vw, 3.5rem) 会让首字变大，但不会触发文字环绕——它还是一个继承父 line-height: 1.6 的内联盒，放大后直接撑高整行，第二行文字被顶开甚至重叠。真正“下沉”的关键是脱离流 + 压缩自身行框。
必须同时写：
-
float: left：唯一能触发右侧文字自然环绕的属性 -
line-height: clamp(0.7, 3vmin, 0.85)：必须显式设为无单位值；vmin比em更稳，因它基于视口短边，竖屏手机缩放时不易错位 -
margin-right: 0.2em：控制与正文间距；慎用margin-top，可能意外触发新 BFC 导致段落偏移
中文段落里 clamp() 容易失效的三个结构陷阱
哪怕字号响应式写对了，::first-letter 也会静默失效，DevTools 里都看不到 computed 样式：
- 首字符前有换行或空格：
<p>\n今天...</p>或<p><!-- 注释 -->今天...</p> - 首字符被
<strong></strong>包裹：<p><strong>今</strong>天...</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>——::first-letter会选中《而非“今”，结果是引号被放大三倍溢出
父容器不加 overflow: hidden 就会塌陷
float: left 让首字脱离文档流，若父 <p></p> 不处理高度塌陷，后续段落会上移、重叠。这不是视觉错觉，是真实布局崩坏。
推荐做法：
- 给段落加
overflow: hidden：最轻量，不增 DOM 节点，兼容性远超display: flow-root（Safari 15.4 之前不支持） - 别在 flex/grid 容器里直接套用：
::first-letter在display: flex或display: grid的父元素下直接失效，得把<p></p>移到布局容器外部 - 服务端或 JS 预处理标点：纯 CSS 无法跳过《【“选第二个字；正则
/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/提取并移走开头标点，才是上线前必做的兜底动作
字体和基线偏移会让 clamp() 看起来“悬空”
中文字体没有统一 ascender/descender，同一套 clamp() 在思源宋体和 PingFang SC 下表现差异极大：前者字形上伸明显，后者更方正。结果常是首字底部悬空，像浮在段落上方。
微调建议：
- 优先用
margin-bottom: -0.15em往下拉，比margin-top安全（后者易触发新 BFC） - 禁用思源黑体、手写体等字形伸展剧烈的字体做首字；首选
"PingFang SC", "Noto Sans CJK SC" - 若需精确控制下沉行数（如占 3 行），
::first-letter已力不从心，应改用initial-letter（Chrome/Firefox 支持）或 JS 动态包裹首字并设固定高度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
