文字环绕图片后意外缩进的根源是浮动元素未清除导致后续块级元素误判可用空间；正确做法是在段落上加clear: both，而非图片上，因clear只对块级元素生效且作用是限制其上边界位置。
文字环绕图片后出现意外缩进，不是文字本身的问题，而是浮动元素未被清除导致后续块级元素“误判”了可用空间。
为什么clear: both要加在段落上，而不是图片上
clear 属性只对块级元素生效，且作用是“限制当前元素的上边界位置”，不是“清理浮动元素”。img本身已脱离文档流，给它加 clear: both 完全无效。真正需要换行的是后面的 <p></p> 或 <h2></h2> —— 它们还留在文档流里，但被浮动图片“顶”得首行缩进。
- ✅ 正确写法：
p.intro { clear: both; }（让这段文字从图片下方完整开始） - ❌ 错误写法：
img { clear: both; }（无任何效果） - ⚠️ 注意：如果文字是纯文本节点（没包在
<p></p>里），clear无法作用——必须用块级容器包裹
父容器塌陷才是缩进的根源，不是margin没设好
第一段文字绕得好，第二段却突然缩进或沉底，说明父容器高度为 0。浮动图片脱离文档流后，父容器“看不见”它，于是后续段落按一个“空盒子”来排布，视觉上就像被顶出了正常位置。
- 现代方案：给父容器加
display: flow-root（Chrome 64+/Firefox 61+/Safari 15.4+ 支持），干净无副作用 - 兼容方案：用伪元素清除，
.wrap::after { content: ""; display: table; clear: both; }，只加一次，别重复套在每个<p></p>上 - 慎用
overflow: hidden：虽能触发 BFC，但可能裁剪position: absolute的下拉菜单、阴影等溢出内容
HTML结构错位比CSS更致命：img必须在文字前且同层
90% 的“不环绕”或“缩进异常”其实源于 DOM 结构错误。文字和 img 不在同一父容器，或 img 在 <p></p> 标签之后，文字根本“感知不到”浮动元素存在。
- ✅ 正确结构：
<div class="wrap"> <img><p>文字</p> </div> - ❌ 错误结构：
<div class="wrap"> <p>文字</p> <img> </div>（文字先渲染，后面才插入浮动图，无法触发环绕） - CMS 或富文本编辑器常自动包裹整段内容为
<p></p>，导致img被挤到外层——务必用 DevTools 查看真实 DOM 树层级
最易被忽略的一点：clear 只解决“换行起点”，不修复“图文间距”。文字贴边、首行缩进过深，大概率是 img 缺少 display: block 和对应方向的 margin（左浮必须配 margin-right），这两者必须同时到位，否则即使清除了浮动，视觉依然混乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
