现代布局中不推荐用 float 实现图文环绕，因其源自印刷排版，易导致父容器塌陷、文字错位、响应式失效等问题；推荐 Flex/Grid 或 inline-block + vertical-align 等更可控方案。
float 图文环绕为什么现在不推荐用了
现代布局中，float 做图文环绕是能用，但属于“能跑通但不该首选”的方案。它本质是为印刷排版设计的浮动机制，不是为复杂网页流准备的；一旦内容高度不一致、容器有 padding 或兄弟元素有 margin，就容易塌陷、错位、清除不干净。
常见错误现象：父容器高度塌陷（看不到背景色）、后续段落被挤到图片下方而非绕行、响应式时图片撑破容器，文字不跟随换行。
- 仅适合单图+纯文本、无 JS 交互、无需响应式微调的静态内容
-
float不影响文档流中其他元素的盒模型计算，但会干扰line-height和vertical-align行内行为 - IE8+ 兼容性好，但 Flex/Grid 在现代项目里更可控、更少副作用
float 实现图文环绕的最小可靠写法
要让文字真正“绕”着图走，关键不在 float 本身，而在清除浮动和行内格式化上下文（BFC）的配合。
示例场景：左图右文，图宽 200px，文字自动环绕：
立即学习“前端免费学习笔记（深入）”；
<div class="wrap"> <img src="a.jpg" alt="" class="left-img"> <p>这里是环绕的文字……</p> </div>
对应 CSS：
-
.left-img { float: left; margin-right: 16px; }—— 必须加margin隔开文字，否则紧贴 -
.wrap { overflow: hidden; }或.wrap::after { content: ""; display: table; clear: both; }—— 二者选一，防止父容器塌陷 - 不要给
p设width或display: inline-block，否则会破坏环绕流
float 和 shape-outside 搭配时的坑
想让文字绕着非矩形轮廓（比如圆角、椭圆、自定义路径）走？shape-outside 是唯一出路，但它对 float 有强依赖，且限制极多。
- 必须配合
float: left/right才生效，position: absolute或display: inline-block不行 -
shape-outside: circle(50%)要求图片本身是正方形，否则裁剪区域错位 - 只支持 Firefox/Chrome/Edge（Safari 15.4+ 才支持
path()），旧版本直接退化为矩形环绕 - 如果图片是响应式（
max-width: 100%），shape-outside的尺寸不会随图缩放，需用clip-path替代或 JS 动态重设
替代方案：用 inline formatting context 更稳
如果只是需要“图左/右 + 文字环绕”，display: inline-block + vertical-align 组合比 float 更易控，尤其在小模块中。
img { display: inline-block; vertical-align: top; width: 200px; }-
p { display: inline-block; width: calc(100% - 216px); vertical-align: top; }—— 注意留出 margin 空间 - 缺点：需要精确算宽度，无法像
float那样让多段文字自动流动；优点：不塌陷、不干扰兄弟元素、响应式时改width即可 - 若内容含多个
p，得把它们包进一个div并设display: inline-block，否则每段都会换行
真正难的不是怎么让文字绕着图走，而是图变宽、屏变窄、字体放大时，绕行逻辑是否还成立。float 方案在这类边界条件下最容易露馅，而且 debug 时往往卡在“看起来没写错，但就是不对齐”。
