::first-letter + float:left 实现首字下沉必须同步设置line-height、margin和父容器清除浮动，否则因行高撑开、浮动未清除导致布局错乱；中文双字下沉需预处理或放弃浮动方案。
::first-letter + float:left 是最常用且兼容性最好的首字下沉方案，但只设这两个属性几乎必然出错——必须同步控制 line-height、margin 和父容器清除浮动。
为什么只写 ::first-letter { float: left; font-size: 3em; } 不生效
常见现象是字体变大了，但没“沉”，后续文字被顶到第二行甚至换行错乱。这不是代码写错了，而是浏览器渲染机制决定的：
-
::first-letter生成的是一个匿名内联盒，它继承父<p></p>的line-height（比如 1.6），放大后行框高度剧增，直接把整行撑高 -
float: left确实让首字脱离流，但若不压低它的行高，它会像一块高砖立在段首，右侧文字只能从它“头顶”开始环绕 - 父
<p></p>若没清除浮动（如overflow: hidden），自身高度塌陷，导致后续段落上移、重叠
::first-letter 生效的硬性前提
这个伪元素不是“写了就管用”，它对 HTML 结构和 CSS 环境极其敏感：
- 目标元素必须是块级（
display: block或inline-block），<span></span>或<div> 套在 <code><p></p>外也无效 - 首字符前不能有空格、换行、HTML 注释或任何标签（例如
<p><strong>你</strong>好</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>中的::first-letter会失效） - 中文段落以标点开头（如《、【、”）时，
::first-letter会选中该标点而非汉字——需预处理或手动包裹 - 不要在父元素上设
text-transform: uppercase后再指望首字保持原形，它会作用于转换后的字符 -
font-size建议 ≥2.5em，太小看不出效果；响应式可用clamp(2rem, 4vw, 3.5rem) -
line-height必须显式设为0.7–0.9（不是继承值），否则首字自带行高会顶开第二行文字 -
margin-right控制首字与后续文字间距，0.15em–0.25em较安全；慎用margin-top，可能触发新 BFC 导致偏移 - 父
<p></p>推荐加overflow: hidden清除浮动，比clear: both更稳，且避免额外 DOM 节点
关键参数怎么调：line-height、margin、font-size 的协同关系
放大字号只是第一步，真正决定“沉不沉”的是这三个值的配合：
示例片段：
article p {
line-height: 1.6;
overflow: hidden;
}
article p::first-letter {
float: left;
font-size: clamp(2.5rem, 4vw, 3.5rem);
line-height: 0.8;
margin-right: 0.2em;
font-weight: bold;
}
两个字都下沉？别硬套 ::first-letter
::first-letter 在所有浏览器中都只匹配第一个 Unicode 字符，即“你”不会连带“好”。想实现双字下沉，只有两种靠谱路径：
- 服务端或 JS 预处理：把首两字单独包进
<span class="drop-first"></span>和<span class="drop-second"></span>，再分别设float: left+ 独立margin-bottom和clear: left - 放弃浮动，改用
display: inline-block+vertical-align: top+transform: translateY()手动定位，但失去文本自动环绕能力
纯 CSS 没有“跳过首标点选第二字”的语法，也别寄希望于 initial-letter——它目前对中文多字支持极不稳定，Safari 下偶有截断，Chrome 需 flag 开启，Firefox 完全不认。
