为什么CSS浮动后文字环绕异常，如何调整？

文字不绕图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。

1. 左浮动 → 只有 margin-right 控制文字右侧距离；margin-left 无效
2. 右浮动 → 只有 margin-left 生效
3. <img> 默认是 inline 元素，部分浏览器（尤其是 Safari）下 margin 不生效，必须加 display: block
4. 避免写 margin: 0 16px 8px 0：语义模糊，易误改；推荐显式写 margin-right: 16px; margin-bottom: 8px;

第二段文字突然掉到图片下方，是父容器塌陷

第一段绕得好，第二段却从图片底部开始，说明父容器高度为 0 —— 浮动元素脱离文档流，父容器“感知不到”它，这就是典型的塌陷。此时调 margin 完全无效。

修复方式必须作用于直接父容器：

1. 现代首选：display: flow-root（Chrome 64+/Firefox 61+/Safari 15.4+ 支持），干净无副作用
2. 兼容旧环境：.parent::after { content: ""; display: table; clear: both; }，只加在父容器上
3. 慎用 overflow: hidden：虽能触发 BFC，但可能裁剪 box-shadow、position: absolute 下拉菜单等溢出内容

Safari 中环绕异常，比 Chrome 更严格

Safari 对 BFC 触发和 inline 元素 margin 处理更保守。常见现象包括：文字完全不绕、紧贴图片边缘、第二段掉底——这些在 Chrome 可能“碰巧”正常，但在 Safari 会立刻暴露。

必须写的两个声明：

1. <img> 必须显式设 display: block，否则 WebKit 版本可能忽略 margin-right
2. 父容器必须创建 BFC：display: flow-root 是首选；若需兼容 iOS 15.3 及更早，用伪元素清除，且三要素缺一不可：content: "" + display: table + clear: both
3. 响应式断点里取消 float 后，记得同步重置 clear: none，否则残留的 clear: both 会造成意外空白

真正容易被忽略的是：浮动后紧跟纯文本节点（没包 <p>），clear 完全无效 —— 必须先用块级标签包裹那段文字。