p::first-letter必须配float:left才能真正下沉，光放大字号只是变大；常见失效原因包括换行符、首字被包裹、父容器为flex/grid或开头为标点；必须协同float:left、line-height:0.75（无单位）和font-size≥2.5em，并注意中文字体兼容性与浮动清除。
p::first-letter 必须配 float: left 才能真正下沉，光放大字号只是变大
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为什么写了 ::first-letter 却没效果
最常见的失效不是 CSS 写错了，而是 HTML 结构或上下文不满足触发条件：
- <p>\n 今天…</p> 中的换行符会让伪元素静默失效
- <p><strong>今</strong>天…</p> 中首字被 <strong> 包裹，::first-letter 不会选中它
- 父容器用了 display: flex 或 display: grid，直接切断文本流，伪元素失效
- 段落开头是全角标点（如《、【、”），部分旧版 Safari 会跳过汉字直接选中标点
p::first-letter 必须同时设置的三个关键样式
只设 font-size 是放大，不是下沉。真正实现文字环绕、视觉下沉，必须协同：
- float: left：让首字脱离文档流，右侧文字才能绕排
- line-height: 0.75（无单位）：压缩首字自身行框高度，避免撑高整行；0.7–0.9 之间较稳妥
- font-size: 2.8em（推荐 ≥2.5em）：中文建议用 clamp(2rem, 4vw, 3.5rem) 适配响应式
- 别漏掉 margin-right: 0.2em 控制字间距，太小挤，太大断层
中文段落要额外注意的兼容性细节
中文字符方正、字怀大，容易和第二行重叠或发虚：
- 避免用 “微软雅黑” 这类无衬线体放大后发虚，优先选 "Noto Serif CJK SC" 或 "PingFang SC"
- line-height: 0.75 在中文下可能仍重叠，可加 margin-top: -0.1em 或 transform: translateY(-0.05em) 微调
- IE11 只认单冒号语法，需写两遍：p::first-letter, p:first-letter
- 移动端 viewport 缩放时，em 可能溢出，加 max-width: 100% 或改用 rem
浮动导致后续段落上移怎么办
加了 float: left 后，<p> 容器高度常塌陷，下面的段落会往上顶：
- 最轻量解法：给 <p> 加 overflow: hidden，强制生成 BFC 清除浮动
- 不要用 clear: both 放在下一段开头——它会强制换行，破坏图文混排逻辑
- 若段落内还混排图片（float: left 的图），确保图片和首字浮动方向一致，否则布局打架
真正麻烦的是首字为 emoji、英文缩写（如 “iOS”）、或引号开头的场景，::first-letter 行为在不同浏览器里差异明显，上线前务必真机多测几遍。
