纯CSS首字下沉需三步：用::first-letter选首字符，float:left使其浮动，配合line-height（0.8–0.9倍）防文字重叠；注意父元素须为块级、首字符不能被HTML标签包裹、响应式推荐clamp()，并确保可访问性。
首字下沉用 float + font-size 就够，但必须加 line-height 调整行高
纯 CSS 实现首字下沉，核心就是让第一个字符脱离文档流、放大、并和后续文字对齐。只设 float: left 和 font-size 很容易导致后续文字“被顶开”或换行错乱。
关键在三步配合：
- 用
::first-letter伪元素选中首字符（注意：只对块级元素生效） -
float: left让它左浮动，腾出右侧空间给正文环绕 - 必须同步调大
line-height（通常设为放大后字体高度的 0.8–0.9 倍），否则第二行会压在下沉字下方
示例：
article p::first-letter {
float: left;
font-size: 3em;
line-height: 0.85;
margin-right: 0.2em;
}
::first-letter 不生效？检查这些常见拦路虎
这个伪元素看着简单，实际失效频率很高，多数不是写法错，而是触发条件没满足：
立即学习“前端免费学习笔记（深入）”；
- 父元素必须是块级容器（
display: block或inline-block），inline元素不支持 - 段落里不能有前置 HTML 标签（比如
<span></span>、<em></em>包着首字符），否则伪元素找不到“纯文本首字” - 首字符是标点（如引号、括号）时，部分浏览器可能跳过；建议用
<span class="dropcap">A</span>手动标记更稳 - CSS 中若写了
text-transform: uppercase在父元素上，::first-letter会作用于转换后的字符，但大小写敏感匹配仍按原始 HTML
响应式下首字下沉崩了？别硬撑 em，改用 clamp()
用 3em 在桌面看着好，到手机上可能占满半屏。直接写死像素值又失去弹性。最简方案是用 clamp() 控制字号区间：
p::first-letter {
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: clamp(0.7, 3vmin, 0.85);
}
这样既避免小屏溢出，也不用写多套媒体查询。注意 line-height 也得响应式——它决定环绕文字的垂直间距，固定值在缩放时容易错位。
额外提醒：vmin 比 em 更适合这里，因为它的基准是视口短边，对竖屏手机更友好。
IE 或老安卓 WebView 里完全不显示？准备降级方案
::first-letter 在 IE11 及更早版本支持有限（比如不支持 float），老版 Android WebView（
- 服务端渲染时，把首字符单独包一层
<span class="dropcap">T</span> - CSS 中对
.dropcap做完整控制：float、font-size、line-height、margin全写死 - JavaScript 补漏（仅必要时）：
document.querySelectorAll('p').forEach(p => { ... })提取首字符重写 DOM，但注意避免重复执行
真正麻烦的不是实现，是首字下沉本质属于“装饰性排版”——它不该影响可访问性。屏幕阅读器仍应读取完整段落，所以千万别用 aria-hidden 隐藏首字符，也别把它塞进 alt 或 title 里凑数。
