文字不绕图90%是HTML结构错误：img必须在文字前且同父容器；需设display:block、显式width和对应margin；父容器须用flow-root或伪元素清除浮动防塌陷。
文字根本不绕图，90% 是 HTML 结构错了
浮动图文不环绕，第一反应不是调 CSS，而是打开 DevTools 看 DOM 树。文字必须和 <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> —— 文字根本“看不见”浮动元素，无法触发环绕
CMS 或富文本编辑器常自动把整段内容包进 <p>，导致 <img> 被挤到段落外层。检查层级，别信所见即所得的编辑界面。
文字贴边、没间距，只改 img 的 margin
文字紧贴图片，不是 float 没生效，而是 <img> 缺少对应方向的 margin，且未设 display: block。
- 左浮动 → 只有
margin-right控制文字右侧距离；margin-left无效 - 右浮动 → 只有
margin-left生效 -
<img>默认是inline元素，部分浏览器（尤其是 Safari）下margin不生效，必须加display: block - 避免写
margin: 0 16px 8px 0：语义模糊，易误改；推荐显式写margin-right: 16px; margin-bottom: 8px;
第二段文字突然掉到图片下方，是父容器塌陷
第一段绕得好，第二段却从图片底部开始，说明父容器高度为 0 —— 浮动元素脱离文档流，父容器“感知不到”它，这就是典型的塌陷。此时调 margin 完全无效。
立即学习“前端免费学习笔记（深入）”；
修复方式必须作用于**直接父容器**：
- 现代首选：
display: flow-root（Chrome 64+/Firefox 61+/Safari 15.4+ 支持），干净无副作用 - 兼容旧环境：
.parent::after { content: ""; display: table; clear: both; }，只加在父容器上 - 慎用
overflow: hidden：虽能触发 BFC，但可能裁剪box-shadow、position: absolute下拉菜单等溢出内容
Safari 中环绕异常，比 Chrome 更严格
Safari 对 BFC 触发和 inline 元素 margin 处理更保守。常见现象包括：文字完全不绕、紧贴图片边缘、第二段掉底——这些在 Chrome 可能“碰巧”正常，但在 Safari 会立刻暴露。
必须写的两个声明：
-
<img>必须显式设display: block，否则 WebKit 版本可能忽略margin-right - 父容器必须创建 BFC：
display: flow-root是首选；若需兼容 iOS 15.3 及更早，用伪元素清除，且三要素缺一不可：content: ""+display: table+clear: both - 响应式断点里取消
float后，记得同步重置clear: none，否则残留的clear: both会造成意外空白
真正容易被忽略的是：浮动后紧跟纯文本节点（没包 <p>），clear 完全无效 —— 必须先用块级标签包裹那段文字。
