::first-letter 必须配合 float: left、显式 line-height（0.7–0.9）和 margin-right 才能真正下沉；否则仅放大字号会撑高行框致布局错乱，且受块级容器、首字符类型、标点干扰及 flex/grid 布局限制。
::first-letter 必须配合 float: left 才能真正“下沉”，光放大字号只是变大，不是下沉。
为什么 ::first-letter 加了 font-size 却不“沉”
常见现象是首字变大了，但后续文字被顶到第二行、上下行距崩坏，甚至整段错位。这不是样式没生效，而是 ::first-letter 默认生成一个内联盒，它继承父元素的 line-height（比如 1.6），放大后行框高度剧增，把整行撑高；float: left 确实让它脱离流，但若不压低自身行高，它就像一块高砖立在段首，文字只能从它“头顶”绕。
- 必须显式设置
line-height，推荐0.7–0.9（无单位数值），不能依赖继承值 - 父容器若未清除浮动（如没设
overflow: hidden），自身高度塌陷，导致后续段落上移、重叠 - 首字符前有空格、换行、HTML 注释或被
包裹，::first-letter会静默失效
::first-letter 生效的硬性前提
它不是“写了就管用”，对结构和上下文极其敏感：
- 目标元素必须是块级（
display: block或inline-block），flex或grid，则直接失效 - 首字符必须是文本流顶层的第一个 Unicode 字母或数字类字符；中文段落以《、【、”开头时，伪元素会选中标点而非汉字
- 不能在父元素上设
text-transform: uppercase后再指望首字保持原形——转换已发生，伪元素作用于转换后的结果 -
font-family、color、font-weight都需显式声明，不可依赖继承
float: left + line-height + margin-right 的协同要点
这三个值必须一起调，单改一个大概率出问题：
-
font-size建议 ≥2.5em，响应式可用clamp(2rem, 4vw, 3.5rem) -
line-height是关键，设为0.75或0.8压缩首字自身行框，避免顶开第二行 -
margin-right控制与后续文字间距，0.15em–0.25em较安全；慎用margin-top，可能触发新 BFC 导致偏移 - 父
推荐加overflow: hidden清除浮动，比clear: both更稳，且不增加 DOM 节点
中文场景下最易被忽略的细节
中文没有大小写，标点干扰强，字体渲染差异大：
- 全角标点（如《、”、【）会被当作首字符选中——上线前务必检查 CMS 或用户输入的真实内容
- 纯 CSS 无法跳过标点选第二个字，服务端或 JS 预处理是唯一可靠解法（例如用正则
/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/提取并移走开头标点） - 某些中文字体基线偏高，可加
margin-bottom: -0.2em微调垂直位置，但别用transform: translateY()，它会让首字脱离文本流影响后续段落对齐 - 如果布局已用
flex或grid，::first-letter必然失效——此时只能手动包裹首字，用你再配float或布局对齐
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
