浮动图片文字不环绕，90%是HTML结构错误：img与文字须同级且img在前；需设display:block和对应方向margin；父容器要触发BFC（如display:flow-root）；clear:both应加在需换行的块级元素上。
浮动图片后文字不环绕，90% 是 HTML 结构错了，不是 CSS 没写对。
检查 <img> 和文字是否在同一个父容器里
文字要绕图，必须和 <img> 是同级兄弟元素，且 <img> 在前。
- ✅ 正确：
<div class="wrap"><img src="a.jpg" class="float-left"><p>这段文字会绕图</p></div> - ❌ 错误：
<div class="wrap"><p>文字在前</p><img src="a.jpg"></div>——<p>已经把文字包死了，<img>被挤到外面，文字根本“看不见”它 - CMS 或富文本编辑器常自动加
<p>，务必用 DevTools 看 DOM 树真实层级，别信源码缩进
<img> 必须设 display: block + 对应方向的 margin
<img> 默认是 inline 元素，margin 在部分浏览器中不生效；文字环绕的是它的外边距边界，不是图片本身。
- 左浮动 → 加
margin-right: 16px（margin-left无效） - 右浮动 → 加
margin-left: 16px（margin-right无效） - 必须同时写
display: block，否则margin可能被忽略 - 避免写
margin: 12px—— 上下 margin 会干扰行高，导致段落错位；推荐显式写margin-right: 16px; margin-bottom: 8px;
父容器塌陷导致第二段文字掉到图片下方
第一段绕得好好的，第二段却从图片底部开始？这不是文字问题，是父容器没“感知”到浮动元素高度，导致后续内容按原始文档流重新排布。
立即学习“前端免费学习笔记（深入）”；
- 现代解法：给父容器加
display: flow-root（Chrome 64+/Firefox 58+/Safari 15.4+ 支持），干净无副作用 - 兼容旧浏览器：用伪元素清除，
::after { content: ""; display: table; clear: both; }，加在父容器上，别加在<img>或<p>上 - 慎用
overflow: hidden—— 它虽能触发 BFC，但可能裁剪position: absolute的下拉菜单、阴影等溢出内容
想让某一段文字不环绕，clear: both 必须加在它自己身上
clear 不是“清除浮动”，而是告诉当前元素：“你的上边界不准挨着任何浮动元素”。它只对块级元素生效，且必须加在需要换行的那个元素上。
- ✅ 正确：给后续的
<h2>或<div>加clear: both - ❌ 错误：给
<img>加clear: both—— 图片自己已经浮走了，clear对它无效 - ⚠️ 如果浮动后紧跟的是纯文本节点（没有
<p>包裹），clear无法作用 —— 必须先用块级标签包住那段文字 - 响应式断点里容易漏掉：取消
float时，clear不会自动失效，必须同步写@media (max-width: 768px) { .text-block { clear: none; } }
最容易被忽略的，是结构顺序错位、display: block 缺失、父容器未触发 BFC 这三处；一旦出问题，不是文字不绕，而是整个区块错位或留白异常。
