::first-letter 加 float: left 是最稳的下沉组合，因浏览器对 ::first-letter 布局控制有限，float: left 是唯一广泛支持且能让文字环绕首字的手段。
为什么 ::first-letter 加 float: left 是最稳的下沉组合
因为浏览器对 ::first-letter 的布局控制权非常有限，它不能脱离文本流直接“撑开”多行空间；float: left 是唯一被广泛支持、能真正让后续文字环绕首字的手段。不加 float，哪怕 font-size: 4em，首字也只占一行高度，文字从它右边平齐开始排，根本不是“下沉”效果。
::first-letter 生效前必须检查的三件事
常见错误不是样式写错，而是上下文不满足基础条件：
- 父元素必须是块级容器（
display: block或inline-block），不能是display: inline、flex或grid容器的直接子元素 - HTML 源码中首字符前不能有空格、换行或注释——比如
<p>\n 文字</p>会导致::first-letter失效 - 如果用了
text-transform: uppercase，::first-letter会作用于转换后的字符，不是原始 DOM 字符
中文首字下沉时 float 必须配 line-height 和负 margin
中文没有字母基线概念，大字号汉字容易和下一行文字粘连或留白过大。光靠 float: left 不够，得手动微调垂直位置：
-
line-height: 0.7或更低，压缩首字自身行高，避免撑高整段 -
margin-top: -0.1em或类似负值，把首字往上提一点，让第二行文字更自然地贴到它右侧 - 避免用
margin-bottom——它在浮动上下文中常被忽略，且可能破坏环绕逻辑
initial-letter 看起来更现代，但别急着替换 float
虽然 initial-letter 语义清晰、控制粒度细（如 initial-letter: 3 / 2 表示下沉 3 行、占 2 行高度），但它目前在 Safari 中仍不支持，在旧版 Chrome/Firefox 中需加 -webkit-initial-letter 前缀，且无法与 float 共存。真实项目里，用 @supports 做降级反而增加维护成本，不如统一用 ::first-letter + float 方案保底。
真正容易被忽略的是：首字下沉不是纯视觉装饰，它会影响可访问性（屏幕阅读器仍按原文本顺序读），也影响打印样式（部分打印机引擎会忽略浮动）。如果内容需要高保真输出，建议用 SVG 包裹首字替代伪元素方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
