浮动图片导致后续段落首行缩进错位，本质是浮动使父容器脱离BFC、内容区域起点被占用；应给父容器设display: flow-root，再用p::first-line{text-indent:2em}精准控制缩进。
浮动图片导致后续段落首行缩进消失或错位
这不是 text-indent 没生效，而是浮动元素脱离文档流后，文字行框的起始位置被“吃掉”了。尤其当图片高度超过第一行文字时，第二段开头会从图片底部开始排布，视觉上像首行缩进被抹平——实际是段落容器高度塌陷，文字按默认基线对齐到了浮动边界上。
为什么给 p 加 text-indent 无效？
常见错误是直接在环绕文字的 <p></p> 上设 text-indent: 2em，但一旦前面有 float: left 图片，该段落的**内容区域起点**就被图片占用了，text-indent 仍会计算，只是缩进空间被视觉遮挡或挤压。
- 优先改用
p::first-line { text-indent: 2em; }—— 伪元素作用于行框，绕过块级容器塌陷干扰 - 若首段需取消缩进（如导语），单独加类：
p.first-para { text-indent: 0; } - 避免在
float父容器内使用font-size: 0清间隙，它会让text-indent的em值归零
clear: both 放在哪才真正起效？
把 clear: both 加在受影响的 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 标签上，等于强制整段换行，破坏环绕；真正要清的是浮动对**父容器布局上下文**的影响。
- 正确做法：给图片的**直接父容器**加
display: flow-root（推荐）或overflow: auto - 不要用
height或min-height硬撑父容器——内容动态变化时留白失控 - 如果必须插清除节点，放在最后一段环绕文字之后：
<div style="clear: both"></div>，而非段落内部
响应式下缩进突然崩坏的隐藏原因
小屏时文字列变窄，原本合理的 margin-right: 16px 可能导致右侧无足够空间环绕，文字被迫折行，缩进错觉加剧。这不是 text-indent 出问题，而是浮动锚点失效。
立即学习“前端免费学习笔记（深入）”；
- 媒体查询中统一重置浮动逻辑：
@media (max-width: 768px) { img { float: none; margin-left: 0; margin-right: 0; } } - 小屏改用文档流自然排列，配合
text-align: center居中图片，比硬调缩进更可靠 - 若坚持环绕，
shape-outside是替代方案，但注意 Safari 对shape-outside: circle()支持仍不稳定
最易被忽略的一点：首字下沉、::first-letter、text-indent 这些文本控制机制，全部依赖父容器保持完整 BFC 上下文。浮动一上，BFC 就断，后续所有文本样式都可能静默失效——先保住容器，再调文字。
