图文同级且图片在前是文字环绕的前提，需确保<img>与文字标签（如<p>）同属一个父容器且<img>位于文字标签之前；图片须设display: block并配合方向性margin，父容器需触发BFC防塌陷，clear: both应加在需换行的块级元素自身而非图片上。
图文必须同级且图片在前
文字不环绕，90% 是 HTML 结构错了，不是 CSS 没写对。<img> 和文字（比如 <p>）必须在同一个父容器里，且 <img> 标签得写在文字标签前面。
✅ 正确：<div class="wrap"><img src="a.jpg"><p>这段文字会绕图</p></div>
❌ 错误：<div class="wrap"><p>文字在前</p><img src="a.jpg"></div>——<p> 已经把文字包死了，<img> 被挤到外面，文字根本“看不见”它
CMS 或富文本编辑器常自动加 <p>，务必用 DevTools 看 DOM 树真实层级，别信源码缩进
图片必须设 display: block + 方向性 margin
<img> 默认是 inline 元素，margin 在部分浏览器中不生效；文字环绕的是它的外边距边界，不是图片本身。
- 左浮动 → 必须写
display: block+margin-right: 16px（margin-left无效） - 右浮动 → 必须写
display: block+margin-left: 16px（margin-right无效） - 避免写
margin: 12px—— 上下margin会干扰行高，导致段落错位；推荐显式写margin-right: 16px; margin-bottom: 8px;
父容器必须触发 BFC 防塌陷
第一段绕得好好的，第二段却从图片底部开始？这不是文字问题，是父容器没“感知”到浮动元素高度，导致后续内容按原始文档流重新排布。
立即学习“前端免费学习笔记（深入）”；
- 现代解法：给父容器加
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无法作用 —— 必须先用块级标签包住那段文字 - 响应式断点里容易漏掉：
clear不会自动失效，必须同步写@media (max-width: 768px) { .text-block { clear: none; } }
float: left 本身更关键：图片是否会被后续内容“顶下来”、响应式缩放后 margin 是否还合理、屏幕阅读器能否正确读取图文顺序——这些都得靠结构语义 + 边界测试来验证，不能只看视觉对齐。 
