::first-letter加float:left后文字被顶到第二行，是因为匿名内联盒继承父段落line-height（如1.6），放大字号后行框高度剧增，撑开整行；必须显式设line-height:0.75（无单位）压低首字行高，并清除父容器浮动以防塌陷。
为什么::first-letter加float: left后文字被顶到第二行？
这不是浮动写错了，而是::first-letter生成的匿名内联盒继承了父段落的line-height（比如1.6），放大字号后，这个“高盒子”直接把整行撑开——后续文字只能从它头顶绕，自然换行错位。
关键点在于：float: left只让它脱离文档流，但不压缩它自身的行框高度。必须显式压低它的line-height，推荐0.7–0.9（无单位），否则光浮动毫无意义。
-
line-height: 0.75是多数中文字体的安全起点，思源宋体下可试0.8，苹方黑体可能需0.7 - 别用
em或rem单位写line-height，会触发继承链计算，结果不可控 - 如果首字仍偏高，优先调
vertical-align: top，比margin-top更稳；后者容易意外触发新 BFC
父容器没清除浮动，为什么后续段落会上移重叠？
float: left让首字脱离流，父<p></p>无法感知其高度，导致自身height塌陷为0px。后续段落就“掉进”这个视觉空洞里，看起来像上移、重叠。
开发者工具里选中父<p></p>，看 Computed 面板的height是否异常小，Layout 面板是否显示内容区域为空——这就是塌陷证据。
- 临时修复：给父
<p></p>加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]+/提取并剥离开头标点 - 前端 JS 动态包裹：检测
textContent[0]是否为标点，是则用span包住首个汉字，再对span设样式 - 放弃
::first-letter方案：直接手动<span class="drop-cap">你</span>好，控制力最强
为什么text-align: center不能让首字下沉段落水平居中？
text-align: center作用于块级容器内的**行内内容流**，包括::first-letter。但首字被float: left后已脱离该流，它不再参与行内对齐计算——所以整个段落视觉中心仍由未浮动的文字决定，首字会明显左偏。
这不是text-align失效，而是浮动和对齐机制根本不在同一层级。
- 真正解法：把首字从浮动改为
display: inline-block+vertical-align: top，再配合text-align: center - 或者保留浮动，但用
transform: translateX(-50%)微调首字位置（注意transform不影响文档流，需结合left: 50%） - 切记：
text-align只管文本对齐，不管浮动元素定位；想居中浮动元素，得用定位或 flex
line-height: 0.75在思源宋体下刚好，在 Noto Sans CJK 下可能截顶，必须用最终上线字体实测。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
