float图文混排下::first-letter失效或错位的根本原因是浮动破坏了首字所依赖的块级上下文，导致父容器高度塌陷或文档流紊乱，使浏览器无法准确定位首字符；同时若被设为inline等非块级显示则伪元素静默退出。
为什么float图文混排下::first-letter会失效或错位
根本原因不是伪元素写错了，而是浮动破坏了首字所依赖的块级上下文。当图片用float: left后，父容器若没触发BFC，高度塌陷；而::first-letter只对**正常参与文档流的块级元素首个字符**生效——一旦父容器高度为0，或内部被浮动“搅乱”，浏览器就无法准确定位“首字符”的渲染位置。更隐蔽的是：如果首字所在<p></p>被意外设为display: inline（比如被CSS-in-JS注入覆盖），::first-letter直接静默退出。
float + ::first-letter组合必须满足的三个硬条件
想让首字下沉在浮动图文里稳定出现，这三点缺一不可：
- 父容器必须显式触发BFC：
display: flow-root（推荐）或overflow: hidden（慎用，可能裁剪position: absolute子项） -
<p></p>必须保持display: block且未被float、position: absolute或display: flex干扰 - 首字不能是标点（如
《、【），否则放大后严重溢出；中文建议用font-family: "PingFang SC", "Hiragino Sans GB"保基线稳定
float图文里做首字下沉，别碰::first-letter的三种情况
以下场景中，::first-letter行为不可控，应改用手动包裹+布局控制：
- 需要下沉精确到3行以上（
::first-letter不支持line-height跨多行稳定计算） - 父容器用了
display: grid或display: flex（此时::first-letter彻底失效，规范如此） - 首字要带渐变色、SVG图标或响应式缩放（
clamp()），::first-letter不支持background-image或transform
实操替代方案：<p><span class="drop-cap">这</span>是一段文字...</p>，再用float: left + font-size: 3em + margin-right: 0.2em控制，比死磕伪元素省心。
float图文混排中首字错位的典型表现与速查
看到这些现象，基本可锁定问题源头：
- 首字放大但文字没绕排 → 图片
margin-right缺失或display: block没加在img上 - 首字悬浮在段落上方、下方空白巨大 →
line-height在::first-letter里被Chrome/Safari差异解析，显式写line-height: 1 - 第二段文字突然从图片底部开始 → 父容器没清浮，高度塌陷，和首字本身无关，先加
display: flow-root - 小屏下首字挤出容器 → 浮动图片没设
max-width: 100%，宽度突变导致环绕区域重算失败
浮动图文里的首字设计，本质是两套机制在博弈：float抢走空间，::first-letter试图锚定文本流。真要稳，就别让它俩硬碰——该手动包裹时就包裹，该换flow-root时就换，别迷信“一行伪元素解决所有”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
