文字环绕浮动图片需用float:left/right，图片须为普通流内元素并设width和margin；后续块级元素可能清除浮动导致环绕失效，关键在父容器与兄弟元素的样式交互。
文字环绕浮动图片的基本写法
直接用 float: left 或 float: right 就能触发文字环绕，但必须确保图片是**普通流内元素**（不能是 position: absolute 或 display: inline-block 且未设宽高导致脱离文本流），且文字内容是后续的块级或行内内容。
关键点：浮动只影响**后续的块级框（block-level boxes）的布局边界**，不影响浮动元素自身的盒模型尺寸计算。
-
float元素会脱离文档流，但文字（作为行内内容）会自动绕开其占据的空间 - 必须给图片设置明确的
width，否则可能撑满父容器，失去“环绕”效果 - 推荐同时设置
margin（如margin-right或margin-left）来控制文字与图片的间距，避免紧贴
常见错误：文字不环绕、全被顶到下一行
典型现象是图片下方空一大块，文字从图片底部才开始排布——这说明浮动没生效，或后续内容被强制清除了浮动。
- 父容器设置了
overflow: hidden/auto且没给高度，可能意外清除浮动（取决于渲染引擎） - 图片后面紧跟了
div等块级元素，且该元素有clear: both（显式或通过 BFC 触发） - 图片本身是
inline元素（如没设display: block），浮动后基线对齐异常，导致文字“卡住” - 没设
margin，文字紧贴图片边缘，视觉上像没环绕（实际已环绕，只是难察觉）
margin 设置建议与兼容性注意
margin 不是可选装饰，而是控制环绕体验的核心参数。它决定文字从哪条边开始折行。
立即学习“前端免费学习笔记（深入）”；
- 图片
float: left→ 推荐加margin-right: 12px，让右侧文字保持呼吸感 - 图片
float: right→ 推荐加margin-left: 12px，同理 - 上下 margin（
margin-top/margin-bottom）会影响图片在段落中的垂直位置，但**不会影响环绕逻辑** - IE8 及更早版本对
float + margin的解析有细微差异，若需兼容，避免margin值为百分比或负值
.wrap img {
float: left;
width: 150px;
margin-right: 12px;
margin-bottom: 6px;
}
现代替代方案：为什么 float 正在被弃用
float 本意是为印刷排版服务的，CSS 多列、shape-outside 和 display: flow-root 才是更可控的环绕手段。但目前仍需支持旧浏览器时，float 最稳妥。
-
shape-outside可实现文字绕椭圆/多边形图片，但 Safari 对非circle()/inset()形状支持不稳定 -
display: flow-root可安全包裹浮动子元素，避免父容器塌陷，比overflow: hidden更语义化 - 真正要注意的不是“怎么写 float”，而是“浮动之后，谁来清除、谁会被影响”——尤其当图文混排嵌套在 CMS 输出的
p标签里时
