::first-letter 仅对块级容器中首个非空白非标点字符生效，需配合 float: left、font-size、line-height: 1、margin-right 及父元素 display: flow-root 清除浮动；中文需注意前导标点与字体宽度影响。
直接用 ::first-letter 配合 float: left 就能实现首字母浮动效果，但实际用起来容易出错——不是文字错位，就是样式不生效，关键在细节控制。
为什么 ::first-letter 有时不生效
这个伪元素只对「块级容器中的第一个文字字符」起作用，且有严格前提：
- 父元素必须是块级元素（比如
p、div），行内元素（如span）无效 - 首字符不能是空格、换行或标点（例如中文段落开头是顿号、引号，或英文段落前有空格，
::first-letter就会跳过） - 如果段落用了
display: inline或display: flex，伪元素会被禁用 - 某些字体加载未完成时，首字母可能暂时不可选中，导致样式延迟应用
float: left 后文字紧贴不上？补这些样式
仅设 float 容易让后续文字上浮到首字母右侧但不包裹、行高塌陷、甚至重叠。必须搭配以下控制：
- 给
::first-letter显式设置font-size（推荐使用em或rem，避免固定像素破坏响应性） - 加上
line-height: 1防止首字母上下留白过大 - 用
margin-right留出文字间距（例如0.2em），别依赖默认空白 - 父
p元素建议加overflow: hidden或display: flow-root清除浮动影响，避免父容器高度坍缩
/* 示例：标准首字下沉浮动 */
p {
display: flow-root; /* 推荐替代 overflow: hidden */
}
p::first-letter {
float: left;
font-size: 3em;
line-height: 1;
margin-right: 0.2em;
font-weight: bold;
}中文段落首字浮动的特殊注意点
中文没有“首字母”概念，但 ::first-letter 对汉字同样有效——它选的是第一个 Unicode 字符。不过要注意：
立即学习“前端免费学习笔记（深入）”；
- 如果段落以全角标点开头（如《、”、【），伪元素会选中标点而非汉字，需手动清理 HTML 前导符号
- 某些字体中汉字字形较宽，
float后可能挤压右侧文字，可加shape-outside: circle()或调整width控制环绕形状 - 移动端小屏下大字号首字易撑破容器，建议用
max-font-size（配合clamp()）或媒体查询降级
最常被忽略的是父容器的 display 模式和浮动清除方式——没加 flow-root 或等效处理，整个段落布局就可能意外错乱。
