float: left是::first-letter实现文字环绕的必要前提，否则仅变大不环绕；必须同步设置line-height:0.75（无单位）压低行高，并用overflow:hidden或display:flow-root清除父容器浮动。
float: left 是 ::first-letter 实现环绕效果的必要前提
不加 float: left 或 float: right，::first-letter 只能改颜色、字号、行高，但无法让后续文字“绕排”——它仍卡在原位置，像普通内联字符一样占位。加了浮动后，首字母才真正脱离文档流，腾出空间供其余文字流动填充。
注意：float 必须显式声明，不能依赖继承；且只对块级容器（如 p、div）中的首个有效字符生效，span 等行内父元素下该伪元素直接失效。
float 后首字上浮/换行错位？根本原因是 line-height 继承失控
常见现象：::first-letter 加了 float: left，但首字被顶到第二行，或与第一行文字明显错位。这不是浮动写错了，而是它生成的匿名内联盒继承了父 p 的 line-height（比如 1.6），放大字号后，这个“高盒子”直接撑开整行高度，后续文字只能从它头顶绕过去。
必须显式覆盖：line-height 得设成无单位数值，推荐 0.7–0.9：
立即学习“前端免费学习笔记（深入）”；
-
line-height: 0.75是多数中文字体（如思源宋体）的安全起点 -
line-height: 0.8在苹方黑体下更贴合基线 - 绝对别用
em或rem，会触发多层继承计算，结果不可控
父容器高度塌陷导致后续段落上移重叠
float: left 让首字脱离文档流，父 p 就“看不见”它的高度了，自身 height 塌缩为 0px。后续段落没有高度参考，就掉进这个视觉空洞里，看起来像上移、压叠。
验证方法：在开发者工具中选中父 p，看 Computed 面板的 height 是否异常小，Layout 面板是否显示内容区域为空。
修复方式（二选一）：
-
overflow: hidden—— 最轻量，兼容性好，适合老项目 -
display: flow-root—— 语义清晰，专为此设计，但 Safari 15.4+ 才稳定支持
避免用 clear: both 或额外 DOM 节点清浮动，也别写 clear: left——它不清父容器内部浮动。
中文开头是《、【、”时 ::first-letter 会选中标点
CSS 规范定义 ::first-letter 匹配的是文本流中第一个 Unicode 字母/数字/标点字符，不跳过全角引号、书名号等。所以段落以 《 开头，伪元素就真去放大那个符号，结果是标点变三倍大，汉字被挤到第二行。
它不会自动找第一个汉字，也没有 ::first-letter:not(:is(“、《、【)) 这种写法。
可靠解法只有服务端预处理：用正则 /^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/ 提取并剥离开头标点，截至 2026 年 6 月，CSS 层面仍无标准方案。
最易被忽略的点是：字体加载未完成时，首字母可能暂时不可选中，导致样式延迟应用——别只盯着 CSS，得检查字体资源加载状态。
