根本原因是浮动元素脱离文档流导致父容器高度塌陷，且文字环绕依赖图片外边距边界；需在父容器用display:flow-root修复塌陷，并给img加display:block和对应方向margin（如左浮加margin-right）控制间距。
段落文字环绕浮动图片时错位，根本不是文字“不听话”，而是浮动元素脱离文档流后，父容器高度塌陷 + 文字容器未隔离布局影响。必须同时处理这两层问题。
为什么加了 float 后第二段就掉到图片下方？
这不是段落自己下沉，是父容器没撑开高度，导致第二段按“无浮动”的原始文档流从顶部开始排布，视觉上就卡在图片底部空白处。常见表现：第一段绕得好好的，第二段开头空一大块，或整段左对齐顶格出现。
- 别给
<p>加clear: both—— 这只会强制换行，不解决塌陷，后续新增内容照样错位 - 别给父容器硬设
height或min-height—— 内容动态变化时必然崩 - 现代最干净解法：
display: flow-root加在图片的直接父容器上（如<div class="article-body">） - 兼容旧浏览器可退而用伪元素 clearfix：
.parent::after { content: ""; display: table; clear: both; }
为什么文字紧贴图片边框、间距失控？
文字环绕的是图片的外边距边界，这个边界只由 <img> 自身的 margin 决定，和父容器或段落的 padding 无关。
- 左浮动 → 必须加
margin-right（如margin-right: 16px），margin-left无效 - 右浮动 → 只有
margin-left起作用（如margin-left: 16px） -
<img>默认是inline元素，margin在部分浏览器中不生效，务必加display: block - 避免用
margin: 12px这类简写 —— 上下 margin 会干扰行高，推荐显式写margin-right: 16px; margin-bottom: 8px;
为什么给文字容器加 overflow: hidden 有时反而出问题？
它确实能触发 BFC 阻止环绕，但副作用明显：可能裁剪 position: absolute 的下拉菜单、阴影、transform 偏移的元素，甚至在移动端 Safari 中引发 zoom 渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 正确作用对象是文字容器本身（如
<p class="content">），不是父容器，更不是<img> - 该容器必须是块级（不能是
inline或inline-block）才能触发 BFC - 更安全的现代替代：
display: flow-root—— 语义清晰、零裁剪风险、保留原有overflow行为 - 响应式断点中若取消了
float，记得同步重置文字容器的overflow或display，否则小屏下可能意外截断长标题
真正难调试的，从来不是“怎么让文字不绕图”，而是“什么时候该撤掉这个保护”
浮动生命周期和响应式状态切换之间，差一行重置样式，布局就错位。比如媒体查询里把 float: left 改成 float: none，但忘了把 display: flow-root 改回 display: block，或者没清掉残留的 clear: both —— 这些地方没有报错，但 DevTools 的 computed 样式里藏着所有线索。
