实现首字下沉必须协同float: left、line-height: 0.75（无单位）和font-size≥2.5em，缺一不可；失效主因是父元素display: flex/grid、首字符前有空白/注释/内联标签，或中文标点开头导致伪元素静默失效。
用 ::first-letter 实现首字下沉，但别忘了清除浮动影响
首字下沉不是靠额外标签或 JS，纯 CSS 就能搞定，核心是 ::first-letter 伪元素。但它默认作用于块级元素内的第一个字母（或标点），所以必须确保目标段落是块级且内容以文字开头——如果段落里第一个子节点是 <span></span> 或 <em></em>，::first-letter 可能不触发。
常见错误是加了样式却没效果，大概率因为父容器用了 float 或 display: inline-block，导致 ::first-letter 失效。稳妥做法是给 <p></p> 加 display: block 并确认无浮动干扰。
示例写法：
p.dropcap {<br> line-height: 1.6;<br> }<br> p.dropcap::first-letter {<br> font-size: 3em;<br> font-weight: bold;<br> float: left;<br> line-height: 0.8;<br> margin-right: 0.2em;<br> }
中文首字下沉要小心字体和行高适配
英文首字下沉常靠 line-height 和 float 配合控制垂直对齐，但中文字符本身占位大、字形方正，line-height: 0.8 容易让下沉字和第二行文字重叠。必须手动调 line-height + margin-top 组合微调。
另外，部分中文字体（如 "Microsoft YaHei"）在小字号下会压缩字宽，下沉字可能显得过窄。建议显式指定等宽或衬线类中文字体，比如 "Noto Serif CJK SC", "PingFang SC", serif。
关键点：
-
::first-letter对中文标点（如「」、『』、——）也生效，若段首是引号，会下沉引号而非汉字，需提前清理或用<span class="first-char"></span>手动包裹 - 移动端视口缩放时，
em单位的font-size可能导致下沉字溢出，可改用rem或加max-width限制 - 不要依赖
text-indent模拟下沉——它只缩进，不放大，也不脱离文本流
IE11 及更老浏览器不支持 ::first-letter 选择器写法
IE11 支持 :first-letter（单冒号），但不支持双冒号语法 ::first-letter。如果项目还需兼容 IE11，得写两遍：
p.dropcap:first-letter,<br> p.dropcap::first-letter {<br> font-size: 3em;<br> float: left;<br> }
不过要注意：IE 对 float 后续文本的换行处理更生硬，常出现第二行顶到下沉字右侧、间距不均的问题。此时可加 padding-left 到段落上作为兜底补偿。
真正麻烦的是 IE9 及以下——它们连 :first-letter 都不支持，只能退化为 JS 插入 <span></span> 包裹首字，或者直接放弃下沉效果。现在多数项目已无需考虑，但若维护旧系统，这点绕不开。
用 initial-letter 是未来方向，但目前仅 Safari 和 Chrome 120+ 支持
initial-letter 是 CSS Inline Layout Module Level 3 提出的新属性，语法更简洁：initial-letter: 3; 表示下沉 3 行高度。它原生支持中文、自动处理行高与周围文字间隙，且不依赖 float，语义和维护性都更好。
但现实是：Firefox 完全未实现，Chrome 直到 120 版本才默认开启（此前需旗标），Safari 16.4+ 支持。所以现在不能单独用它替代 ::first-letter。
折中方案是渐进增强：
p.dropcap {<br> initial-letter: 3;<br> }<br> p.dropcap::first-letter {<br> /* fallback styles */<br> font-size: 3em;<br> float: left;<br> }
注意：initial-letter 和 ::first-letter 不会冲突，现代浏览器优先用前者，老浏览器回退到后者——前提是两者规则没有互相覆盖的属性（比如都设了 float 就可能出问题）。
真正容易被忽略的是：哪怕用了 initial-letter，如果段落用了 text-align: justify，某些浏览器仍会因字距调整导致下沉字位置偏移，需要额外加 text-align: start 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
