float首字下沉只对第一个字生效，因单个span包裹多字仍为不可拆分行内盒，整体浮动后文本仅绕其外边界；需拆分为独立浮动元素并精确控制line-height与margin-bottom。
float 实现首字下沉为什么只对第一个字生效
因为 float 作用在行内元素（如 <span></span>）上时，浏览器默认按字符盒模型逐个渲染，单个 <span></span> 包裹两个汉字仍被视为一个不可拆分的行内盒子——它会整体浮动，但后续文本流仅绕开这个盒子的外边界，不会“感知”内部有两个字，更不会自动让第二字也下沉。
要让两个汉字都视觉下沉，必须拆成两个独立浮动元素
常见错误是写 <span class="drop">你好</span> 然后只给 .drop 设 float: left 和大字号——结果只是“你好”二字一起左浮、整体放大，行文从第二行开始绕开整个宽块，首行文字被顶高，完全不是下沉效果。
正确做法是分别包裹每个字，并控制垂直位置：
- 第一字用
float: left+ 大字号 + 负margin-bottom（或line-height调整）拉低 - 第二字用
float: left+ 同样大字号 + 更大的负margin-bottom，且需设clear: left防止和第一字重叠 - 父容器需清除浮动（
overflow: hidden或伪元素），否则高度塌陷导致后续段落上移
示例片段：
立即学习“前端免费学习笔记（深入）”；
<p>
<span class="drop-first">你</span>
<span class="drop-second">好</span>，欢迎阅读……
</p>
<style>
.drop-first {
float: left;
font-size: 3em;
line-height: 0.8;
margin-bottom: -0.2em;
}
.drop-second {
float: left;
font-size: 3em;
line-height: 0.8;
margin-bottom: -0.6em;
clear: left;
}
p { overflow: hidden; }
</style>
现代方案更推荐使用 ::first-letter 伪元素
::first-letter 原生支持多字（通过 string-set 或 CSS 自定义属性配合 JS 可扩展），但注意：纯 CSS 下它**只匹配第一个 Unicode 字符**，即“你”，不包括“好”。想强制两字下沉，仍得回退到手动包裹 + 浮动，或改用 display: inline-block + 定位模拟——但那就脱离了 float 的原始需求。
兼容性上，float 方案在 IE8+ 都可用；而 ::first-letter 对中文双字支持始终有限，且无法精确控制第二个字的基线对齐。
字体放大后行高错乱是最大坑点
放大的文字若没调 line-height 或 vertical-align，会挤压上下行距，造成段落间距突变、文字重叠或断行异常。尤其当父 <p></p> 行高为 1.5 时，3em 字体的默认行高可能远超预期。
- 务必显式设浮动字的
line-height（常设为0.7–0.9） - 避免用
margin-top抬升，容易触发新的 BFC 导致布局偏移 - 移动端需额外加
font-size-adjust或媒体查询微调缩放比例
真正难的不是让两个字下去，而是让它们下去之后，其余文字还乖乖待在该待的位置上——这取决于你有没有把浮动盒子的尺寸、行高、清除逻辑全算清楚。
