::first-letter需父元素为块级且无前置空白或内联标签包裹，否则不生效；必须配合float:left、合适line-height（0.75～0.85）和margin-right（≥0.2em）才能实现正确下沉效果。
::first-letter 必须加 float: left 才能真正“放大并下沉”，只写 font-size 只会让首字变大、不环绕、还撑乱行高。
为什么写了 ::first-letter 却完全没反应
不是 CSS 写错了，是浏览器压根没生成这个伪元素——它对结构极其挑剔：
- 父元素必须是块级容器（
<p>、<div>默认符合；但加了display: flex或display: grid就直接失效） - 段首不能有任何空白：HTML 里写成
<p>\n 今天</p>或<p><!-- 注释 -->今天</p>，伪元素会捕获换行符或注释开头，跳过“今”字 - 首字符不能被内联标签包裹：
<p><strong>今</strong>天</p>中的“今”已被<strong>包住，::first-letter找不到裸露的首字符 - 段首是《、【、“、— 等全角标点时，Chrome 可能放大标点，Safari 可能跳过它去选下一个汉字，行为不一致
float: left + line-height 配合失当会导致文字上爬或重叠
浮动只是让首字脱离文档流，但它的行框高度仍由 line-height 控制。若不干预，放大后的首字会把整行顶高，第二行文字就从它“脚下”开始排，视觉上压在一起：
-
line-height必须显式设置为无单位数值，推荐0.75～0.85；设成1在中文字体下常导致顶部截断，设成1.2或继承父级值（如1.6）必然撑开第一行 -
margin-right别省，至少0.2em；太小（如0.05em）会让正文紧贴首字边缘，尤其在小字号段落里显得拥挤 - 避免给
::first-letter加padding或border——旧版 Safari 和 Edge 渲染位置可能偏移，且padding-top/bottom在部分引擎中无效 - 父
<p>建议加overflow: hidden清除浮动，比clear: both更轻量，也防塌陷导致后续段落上移
中文场景下 ::first-letter 的实际可用边界
它不识别“中文首字”，只按 Unicode 字符顺序取第一个可渲染字符。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 段首是“《论语》开篇……”，
::first-letter会选中《，不是“论”；不同浏览器对标点的处理逻辑不统一（截至 2026 年 8 月） - 没有
text-transform效果，所谓“首字大写”在中文里纯属错觉；汉字本身无大小写之分 - 若需稳定控制（比如强制放大第一个汉字、跳过所有前置标点），JS 提前提取并包裹首汉字仍是更可靠方案，例如：
<p><span class="drop-cap">论</span>语开篇……</p> -
font-size推荐用响应式写法，如clamp(2rem, 4vw, 3.5rem)，固定3em在窄屏小字体下可能过大，在宽屏大字体下又不够沉
真正难的不是写出那几行 CSS，而是让放大后的首字和后续文字在各种字体、字号、设备宽度下都保持视觉对齐——这得靠反复调 line-height 和 font-size 的比值，而不是套模板数值。
