display: flow-root是现代浏览器下解决浮动导致段落错位的标准解法，作用于图片直接父容器可修复高度塌陷，使文字正常环绕；左浮需设margin-right并加display:block，右浮则用margin-left。
直接用 display: flow-root 作用于图片的直接父容器，就能解决绝大多数段落错乱问题。这不是“可选方案”，而是现代浏览器下最干净、无副作用的标准解法。
为什么第二段文字突然掉到图片下方？
这不是文字自己下沉，是父容器高度塌陷了——浮动元素脱离文档流后，父容器计算高度时直接忽略它，height 在 DevTools 中显示为 0px 或几像素，后续段落就从顶部开始排布，视觉上卡在图片底部空白处。
- 别给
<p>加clear: both：只让这一段换行，不修复塌陷，新增段落照样错位 - 别硬设
height或min-height：内容动态变化或响应式缩放时必然崩 - 现代写法：
.article-body { display: flow-root; }，一行生效，语义清晰，不裁剪position: absolute弹层或阴影 - 兼容旧浏览器（如 IE11）时退而用伪元素：
.parent::after { content: ""; display: table; clear: both; }，三者缺一不可
文字紧贴图片、左右间距失控怎么办？
文字环绕的是图片的外边距边界，这个边界只由 <img> 的 margin 决定，和父容器或段落的 padding 无关。
- 左浮动 → 只有
margin-right生效（如margin-right: 16px），margin-left无效 - 右浮动 → 只有
margin-left生效 -
<img>默认是inline元素，部分浏览器中margin不生效，务必加display: block - 避免用
margin: 12px这类简写：上下 margin 会干扰行高，推荐显式写margin-right: 16px; margin-bottom: 8px;
怎么确认是不是浮动导致的错乱？
打开 DevTools，用 Ctrl+Shift+C（Win）或 Cmd+Shift+C（Mac）点选错位区域任意子元素，逐级向上查看父节点的 Computed 面板中的 height 值。
立即学习“前端免费学习笔记（深入）”；
- 若某个
<div>或<section>的height是0px，但内部有float: left或float: right元素，基本锁定问题源头 - 再看该父容器的
overflow是否为visible（默认值），且display是block—— 这说明它既没触发 BFC，也没做清除 - 快速可视化：在 Console 中运行
$$('div, section, article').forEach(el => el.style.border = '1px solid #f00')，观察红框是否“断开”
真正难调试的，从来不是“怎么让段落不掉下去”，而是“什么时候该撤掉 display: flow-root”。比如响应式断点里取消了 float，却忘了同步移除父容器的 display: flow-root 或重置 overflow，小屏下反而意外截断长标题或溢出内容。
