仅设 font-size 会使首字撑高整段，因其放大后拉高所在行 line-height；浮动可使其脱离行盒，但需调 line-height（0.8）、margin-top（-0.2em）和 margin-right（0.3em）来精确定位；::first-letter 对非文字首字符失效，应清理空白或改用 JS 包裹；移动端须同步调整 width、line-height 等以适配小屏。
为什么只设 font-size 会让首字“撑高”整段？
单纯用 p::first-letter { font-size: 3em; }，首字会留在文档流内，它所在行的 line-height 会被强制拉高到匹配放大后的字体高度——结果就是第一行和第二行之间空出一大截，段落视觉断裂。这不是 bug，是行盒（line box）自动适应内容的正常行为。
浮动是绕过这个限制最直接的方式：一旦加了 float: left;，首字就脱离行盒，不再参与该行高度计算，后续文字自然环绕其右侧，第一行恢复原有 line-height。
float: left 后文字为啥还压在首字下面？
常见现象：首字放大后，第二行文字从它正下方开始，而不是从右侧起始——说明浮动生效了，但垂直定位没调好。根本原因是 ::first-letter 浮动后，它的基线（baseline）仍默认对齐父元素文本的基线，而大字号下基线位置远低于视觉中心。
必须同步控制三个值：
-
line-height设为0.7–0.9（推荐0.8），让它“收窄”垂直占位，避免向下挤压 -
margin-top可微调（如-0.2em），把首字往上提一点，对齐第一行中线 -
margin-right别省，至少0.3em，否则文字会紧贴首字边缘，尤其在小字号段落里特别难看
中英文、标点开头时 ::first-letter 失效怎么办？
::first-letter 只匹配第一个**可渲染的文字字符**。如果段落以空格、换行、中文标点（如《、【、“）、英文引号或破折号开头，伪元素会跳过这些，落到下一个有效字母/汉字上——导致放大错位甚至不触发。
稳妥做法：
- HTML 层确保段落真实首字符是文字，删掉开头不可见字符（
等） - 用
white-space: pre-wrap;配合text-indent: 0;防止编辑器自动缩进引入空格 - 极端情况（如 CMS 输出不可控），改用 JS 手动包裹首字：
<span class="dropcap">A</span>bc...，再对.dropcap做浮动
移动端适配时容易忽略的两个细节
小屏下放大首字极易溢出容器或遮挡文字，光靠媒体查询调 font-size 不够：
关键要同步处理：
-
max-width限制浮动区域宽度（例如width: 1.8em;），防止首字过宽挤垮右侧文字流 -
line-height在媒体查询里也得重设（比如从0.8改成0.65），因为字号变小后，原比例会让首字“沉”得更深
浮动本身没有响应式逻辑，所有尺寸、间距、行高都得按实际渲染效果手动对齐——这点比 initial-letter 更费调试，但也更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
