真正“沉”下去必须同时满足三个硬性条件：父元素是块级且未被flex/grid破坏文本流、首字符是纯文本且前面无空白或标签、样式上必须配齐float:left+line-height+font-size。

只写 ::first-letter { font-size: 3em; } 不会下沉，只会撑开行高、顶开第二行文字——真正“沉”下去必须同时满足三个硬性条件：父元素是块级且未被 flex/grid 破坏文本流、首字符是纯文本且前面无空白或标签、样式上必须配齐 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.6 可能截断字形顶部，高于 0.95 容易顶开下一行
• 中文建议从 0.75 起试，英文可略高（0.8–0.85）

::first-letter 静默失效的三大结构陷阱

DevTools 里都看不到 computed 样式，不是选择器写错，而是浏览器直接忽略——它对 DOM 结构极其敏感：

• 父元素用了 display: flex 或 display: grid：文本流中断，伪元素静默失效
• 首字符前有换行、空格、HTML 注释（如 <p>\n今天…</p> 或 <p><!-- 注释 -->今天…</p>）
• 首字符被 <strong></strong>、<em></em> 等内联标签包裹（如 <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>）

中文段落以《、【、“开头时，伪元素会选中标点而非汉字——结果是引号被放大三倍，严重溢出。

必须协同设置的三个核心样式

缺一不可，单改一个大概率崩布局：

• float: left：唯一触发文字环绕的属性；不加它就只是放大，不是下沉
• line-height: 0.75：压住首字自身行框高度，避免撑开整行；注意必须是无单位数值
• font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐写法；固定值至少 2.5em，2em 在多数中文字体下视觉无下沉感

额外建议：margin-right: 0.2em 控制与正文间距；父 <p></p> 加 overflow: hidden 清除浮动，比 clear: both 更轻量。

中文场景下最常忽略的硬伤

中文没有大小写，字体基线不统一，标点干扰强，纯 CSS 几乎无法兜底：

• 全角标点（如《、”、【）会被当作首字符选中——上线前必须检查 CMS 或用户输入的真实内容，不能只测“今天天气好”这种理想 case
• ::first-letter 无法跳过标点选第二个字；服务端正则 /^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/ 预处理，或前端 JS 动态包裹首汉字，是唯一可靠解法
• 某些中文字体（如思源宋体）ascender 偏高，仅调 line-height 不够，需加 margin-bottom: -0.2em 微调；但慎用 margin-top，可能触发新 BFC 导致整段偏移

复杂需求（比如首字带 SVG 图标、精确占 3 行高度、或布局已用 Flex/Grid 封装全文本块）时，::first-letter 就该让位给 HTML 手动包裹或 initial-letter ——它不是万能钥匙，而是一把对环境极其挑剔的精密工具。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！