::first-letter 下沉需 float: left、line-height 和 font-size 三者协同；父元素禁用 flex/grid、首字须为纯文本、避免前置空白或标签包裹，否则伪元素静默失效。
::first-letter 必须配合 float: left、line-height 和 font-size 三者协同才真正下沉，光放大字号只是变大，不是下沉。
为什么写了 ::first-letter 却完全没反应
它不是选择器写错了，而是 DOM 或 CSS 环境不满足硬性前提：
- 父元素设了
display: flex或display: grid—— 文本流被切断，伪元素静默失效 - 首字符前有换行、空格、HTML 注释（如
<p>\n今天</p>或<p><!-- 注释 -->今天</p>） - 首字被
<strong></strong>、<em></em>等内联标签包裹，伪元素找不到“文本流顶层的第一个字符” - 父元素是
display: inline或display: inline-block（除非你明确需要该 display 值且确认仍生成格式化上下文）
::first-letter 必须写的三个核心样式
只改 font-size 和 color 是无效的。真正决定“沉不沉”的是这组组合：
-
float: left：唯一能触发文字自然环绕的属性；缺了它，后续文字不会绕排，首字只是卡在原位变大 -
line-height: 0.75（无单位）：必须显式设置；继承父段落的line-height: 1.6会让放大后的首字撑高整行，导致第二行被顶开甚至重叠 -
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐；固定值至少用2.5em，2em在多数中文字体下视觉下沉感极弱
中文段落里首字下沉容易踩的坑
中文没有大小写，但标点和字体特性会带来额外干扰：
- 段落以
《、【、“开头时，::first-letter会选中标点而非汉字——结果是引号被放大三倍，严重溢出 -
text-transform对中文无效，但若父元素设了text-transform: uppercase，伪元素仍会作用于转换后结果（对英文影响大） - 某些中文字体（如手写体、装饰体）字宽不均，放大后易撑破行框；建议用
font-family: "PingFang SC", "Hiragino Sans GB"这类结构稳定的字体 - 中文字基线偏高，可加
margin-bottom: -0.2em微调垂直位置，比vertical-align更可靠
父容器高度塌陷和浮动清除问题
用了 float: left 后，父 <p></p> 高度常会塌陷，导致后续段落上移、重叠：
- 别用
clear: both—— 它要额外加 DOM 节点或空 div - 推荐给父
<p></p>加overflow: hidden或display: flow-root，前者兼容性更好，后者更语义化 - 慎用
margin-top调整首字位置——可能意外触发新 BFC，导致整体偏移；优先用transform: translateY(-0.1em)
真正难的不是写几行 CSS，而是确保 HTML 结构干净、父容器未被 Flex/Grid 污染、首字符是纯文本且无前置干扰——这些细节一错，::first-letter 就彻底静默，连报错都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
