浮动图片文字不环绕的三大主因：一是html结构错误，img与文字不在同一父容器或p标签在img前；二是img缺少正确外边距（左浮加margin-right，右浮加margin-left）且未设display:block；三是父容器塌陷导致后续段落错位，需用display:flow-root或clearfix修复。
浮动图片后文字不环绕，先查HTML结构顺序
文字不环绕，90% 是因为 <img> 和文字不在同一父容器里，或者 <p></p> 写在了 <img> 前面。
- ✅ 正确结构：
<div class="wrap"> <img src="a.jpg" class="float-left"><p>这段文字会绕图</p> </div> - ❌ 错误结构：
<div class="wrap"> <p>文字在前</p> <img src="a.jpg"> </div>—— 文字根本“看不见”浮动元素，无法触发环绕 - 如果用 CMS 或富文本编辑器生成 HTML，注意它可能自动把
<p></p>包裹整段内容，导致图片被挤到段落外层 —— 检查 DevTools 的 DOM 树层级
文字紧贴图片、间距失控，只改 img 的 margin
浮动后的文字贴边，不是 float 没生效，而是没给 <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;
第二段文字突然掉到图片下方，不是文字问题，是父容器塌陷
第一段绕得好好的，第二段却从图片底部开始，说明父容器没“感知”到浮动元素高度，导致后续段落按文档流重新排布 —— 这是典型的父容器高度塌陷，和文字本身无关。
- 别给父容器硬设
height，响应式下必崩 - 现代写法直接加
display: flow-root（Chrome 64+/Firefox 61+/Safari 15.4+ 支持），干净无副作用 - 兼容旧浏览器时用 clearfix：
.parent::after { content: ""; display: table; clear: both; }，只加在父容器上，别加在<img>或<p></p>上 -
overflow: hidden虽能触发 BFC，但可能裁剪position: absolute的下拉菜单、阴影等溢出内容，慎用
想让某一段文字不环绕，clear: both 必须加在它自己身上
clear 不是“清除浮动”，而是告诉当前元素：“你的上边界不准挨着任何浮动元素”。它只对块级元素生效，且必须加在需要换行的那个元素上，不是加在图片上。
- ❌ 给
<img>加clear: both：完全无效，图片自己已经浮走了 - ✅ 给后续的
<h2></h2>或<div> 加 <code>clear: both，它才会从图片下方完整开始 - 如果浮动后紧跟的是纯文本节点（没有
<p></p>包裹），clear无法作用 —— 必须先用块级标签包住那段文字 - 响应式断点里常漏掉：
@media (max-width: 768px) { .text-block { clear: none; } }，否则小屏下会多出意外空白
实际中最容易被忽略的，是浮动与 clear 的作用对象错位，以及响应式中未同步清理 clear 值。这两处一出问题，布局就不是“换行不到位”，而是整个区块错位或留白异常。
