加了 float: left 仍不“下沉”是因为 ::first-letter 默认继承父元素 line-height 致使行框被拉高，需显式设置 line-height: 0.75（无单位）压制自身行高，并确保父元素为块级、首字符前无空白或内联标签包裹。

只写 ::first-letter { font-size: 3em; float: left; } 不会真正“下沉”，只会让首字变大并顶开第二行文字——关键缺了 line-height 压制和父容器浮动清除。

为什么加了 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 样式。

• 父元素必须是块级：<p></p> 默认符合，但加了 display: flex 或 display: grid 就立刻失效
• 首字符前不能有空白：HTML 中 <p>\n 今天…</p> 或 <p><!-- 注释 -->今天…</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/2714" title="Qclaw"><img src="https://img.php.cn/upload/ai_manual/001/246/273/69b0c600b9ae8688.png" alt="Qclaw" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/2714" title="Qclaw" class="overflowclass">Qclaw</a> <p class="overflowclass">一款AI开发辅助工具，主要用于腾讯电脑管家打造的桌面智能体AI助手，随时随地，微信一下，Qclaw帮你搞定一切，适合需要提升相关任务效率的用户。</p> </div> <a rel="nofollow" href="/ai/2714" title="Qclaw" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 全部失效
• 首字符不能被内联标签包裹：<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 控制与正文间距；父 <p></p> 加 overflow: hidden 清除浮动，比 clear: both 更轻量。

中文场景下最常踩的坑

中文没有字母基线概念，大字号汉字容易和下一行文字粘连或留白过大：

• 标点开头无法跳过：CSS 没法让 ::first-letter “跳过顿号选第二个字”，只能靠服务端正则预处理，或前端 JS 检测后动态包裹首汉字
• 字体影响巨大：思源宋体、Noto Sans CJK 等字体的字形上下伸展不一，line-height: 0.8 在 A 字体刚好，在 B 字体可能截顶或留白过多；实测时务必用最终上线字体
• 慎用 margin-top：可能触发新 BFC 导致偏移；margin-bottom: -0.2em 往下拉比往上提更安全

真正难的不是写对那几行 CSS，而是确认 DOM 结构干净、字体渲染稳定、移动端边界情况都被覆盖。

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