::first-letter 伪元素需同时满足 float: left、显式 line-height 和足够 font-size 才能真正下沉；否则仅首字变大，文字不环绕甚至错位。
::first-letter 伪元素不是写了就下沉，它必须配合 float: left、显式 line-height 和足够大的 font-size 才能真正生效；否则只是首字变大，文字不会环绕，甚至整段错位。
为什么 ::first-letter 写了却完全没反应
根本原因不是选择器写错，而是 DOM 结构或 CSS 环境不满足触发条件：
- 父元素设了
display: flex或display: grid—— 这会切断文本流，::first-letter直接不触发 - 首字符被
<strong></strong>、<em></em>等内联标签包裹，例如<p><strong>今</strong>天…</p> - HTML 中首字符前有换行、空格、注释或零宽字符，如
<p>\n 今天…</p>或<p><!-- 注释 -->今天…</p> - 父元素设了
display: inline或display: inline-block（除非你明确需要该 display 值且确认上下文仍生成格式化上下文） - 用了
text-transform: uppercase后又想对原始字符样式化——::first-letter作用的是转换后的字符
让首字真正“沉下去”的三个必配样式
光改 font-size 只是变大，不是下沉。要实现文字自然环绕、视觉下沉，必须协同以下三者：
-
float: left：让首字脱离文档流，为右侧文字腾出绕排空间；缺了它，文字不会环绕 -
line-height: 0.75（无单位）：必须显式设置；继承父级行高会导致放大后整行被顶高；数值越小下沉感越强，但低于0.6可能截断字形 -
font-size: 2.8em：建议 ≥2.5em；中文可用clamp(2rem, 4vw, 3.5rem)响应式适配
别用 vertical-align 微调位置——在浮动上下文中不可靠；改用 margin-top 或 transform: translateY() 更可控。
父容器必须加 overflow: hidden 清除浮动
如果不处理浮动带来的高度塌陷，后续段落会上移、重叠：
- 给
<p></p>加overflow: hidden是最稳的清除方式，比clear: both更轻量，且不增加 DOM 节点 - 慎用
display: flow-root：虽然语义更清晰，但 Safari 15.4 之前兼容性差 - 如果父容器本身是
flex或grid，::first-letter已经失效，加清除也没用——得把段落移到布局容器外部
中文场景下容易被忽略的细节
中文首字下沉不是“套上样式就完事”，有几个关键点常被跳过：
- 段落以《、【、“等全角标点开头时，
::first-letter会选中它而非汉字，结果是引号被放大三倍，严重溢出 - 某些中文字体（如手写体、装饰体）字宽不均，单纯放大容易撑破行框；推荐指定
font-family: "PingFang SC", "Hiragino Sans GB"等结构稳定的字体 - 中文字基线偏高，可加
margin-bottom: -0.2em微调垂直位置，避免首字“浮”在行首 - 移动端小屏下，固定
font-size: 3em容易溢出；务必用clamp(2rem, 4vw, 3.5rem)或媒体查询兜底
复杂点在于：它对结构极其敏感，而错误又静默发生——没报错、没警告，只是什么都没变。一旦发现失效，优先检查 HTML 开头有没有空格或注释，再看父容器 display 值，最后才调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
