float仍是图文环绕唯一可靠的基础机制，因其让图片脱离块级流却保留在行内流中，使后续文字每行自动检测浮动边界并换行；flex、grid等布局模型不参与行盒计算，无法实现环绕。
float 仍是图文环绕唯一可靠的基础机制
因为浏览器渲染引擎对行内流（inline formatting context）的排版支持，至今只有 float 能触发文字自动折行绕排——不是它“过时但能用”，而是 flex、grid、position: absolute 全部不参与行盒（line box）的布局计算，根本无法产生环绕行为。
常见错误现象：给图片加 display: inline-block 或 align-self: start，文字依然从图片下方整段开始，而非逐行绕开。这不是写法不对，是这些布局模型压根没设计这个能力。
-
float: left让图片脱离块级流，但保留在行内流中，后续文字的每一行都会检测浮动边界并自动换行 -
shape-outside必须依附于float才生效，它只是“修饰”绕行路径，不是替代方案 - 即使你用
column-count模拟多栏环绕，文字仍会跨栏断裂，且无法控制单图周围的紧密度
float 图文环绕失效的三个硬性前提条件
不是 CSS 写错了，而是 HTML 结构或上下文没满足基础约束。只要任一条件不成立，float 就不会触发环绕。
-
<img>标签必须出现在文字容器（如<p></p>）之前，不能靠 CSS 顺序“后置再拉回” - 图片和文字必须在同一个父容器内，比如不能
<div><img></div> <p>文字</p>这样分家 - 父容器必须建立 BFC，否则高度塌陷导致后续段落直接顶上来；推荐用
display: flow-root，别依赖overflow: hidden截断阴影或下拉菜单
margin 在 float 图文环绕里的真实作用范围
margin 不控制“绕哪走”，只控制“离多远”。很多人误以为加大 margin-right 就能让文字离图片更远，其实它只是把整个浮动框推开，绕行路径仍由 shape-outside 或默认矩形决定。
- 左浮动时只认
margin-right，右浮动时只认margin-left；上下 margin 对环绕无实质影响，但可能撑开段间距 - 必须设在
<img>上，而不是文字容器上——文字是行内流，只响应浮动元素自身的外边距 - 响应式下固定像素值（如
margin-right: 16px）容易在小屏过挤，建议改用rem或em，并在@media中重置为0或移除float
为什么 shape-outside 不能绕开 float
shape-outside 是图文环绕的增强层，不是独立方案。它所有形状定义（circle()、polygon()、path()）都必须配合 float: left 或 float: right 才解析生效。
- 如果去掉
float，shape-outside完全被忽略，连降级矩形绕行都不会触发 - 图片必须有明确尺寸（
width和height），否则circle(50%)会按 0×0 计算，结果是看不见的点 - Safari 15.4 之前不支持
path()，旧版 iOS 微信 WebView 直接无视该声明，但保留float+margin至少还能矩形绕行
真正麻烦的从来不是写 float: left，而是确保 HTML 顺序可控、BFC 稳定、响应式断点覆盖所有视口、屏幕阅读器能按语义顺序读取——这些没法靠一条 CSS 解决，得靠结构验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
