float 仍是文本环绕图片最可靠方案，兼容性好、语义清晰，需配合 clear 清除浮动、明确图片宽度及合理 margin；Flex 不适合真正环绕，CSS Shapes 需与 float 配合使用。
float 实现文本环绕图片仍是可靠选择
当需要让文字自然绕排在图片左侧或右侧时，float 依然是最直接、兼容性最好、语义最贴近“图文混排”本意的方案。它不依赖容器布局模式，也不改变文档流中其他元素的定位逻辑，只影响紧邻的块级内容流向。
常见错误是给图片加了 float 却忘了清除浮动，导致后续段落塌陷或错位。尤其在 CMS 或富文本编辑器输出的 HTML 中，<p></p> 和 <img alt="CSS如何实现文本环绕图片的非Flex传统效果_分析Flex布局的局限性" > 混排时极易出问题。
- 图片必须设置明确宽度（如
width: 200px），否则float在某些浏览器中可能失效或表现异常 - 文字容器无需额外样式，但建议给图片加
margin（如margin: 0 16px 8px 0）避免贴边难读 - 父容器末尾需清除浮动：可用
::after伪元素 +clear: both，或临时加<div style="clear:both"></div>
为什么 Flex 布局不适合做真正的文本环绕
display: flex 会让子元素脱离常规文本流，所有子项（包括图片和文字容器）都变成弹性项目，文字无法“绕”着图片走，只能并排或上下堆叠——这本质是布局分区，不是环绕。
典型误用场景：把 <img alt="CSS如何实现文本环绕图片的非Flex传统效果_分析Flex布局的局限性" > 和一个 <p></p> 放进 flex 容器，指望文字自动折行绕图。结果是文字被压缩成窄列，或溢出、换行失控，尤其在响应式断点下更难控制。
立即学习“前端免费学习笔记（深入）”；
- Flex 容器中的文字默认按块级行为渲染，
flex-wrap: wrap对单个<p></p>内部文字无效 - 无法实现“首行绕图、次行顶满宽度”的传统报刊式效果
- 图片尺寸变化时，Flex 不会触发文字重排以适应新留白，而
float会实时响应
现代替代方案：CSS Shapes 的适用边界
shape-outside 是唯一能真正扩展“环绕”能力的现代属性，支持多边形、椭圆甚至图片 Alpha 通道定义绕排轮廓。但它不是万能补丁：
- 仅作用于设置了
float的元素，不能单独使用；也就是说，它必须和float配合，不是 Flex 的替代品 - IE 完全不支持，Safari 对
shape-outside: image()支持有限，需降级回矩形环绕 - 若图片是响应式（
max-width: 100%），必须同时用shape-margin控制间隙，否则缩放后环绕距离失真
示例最小可行配置：
img { float: left; width: 30%; shape-outside: ellipse(50% 50% at 50% 50%); shape-margin: 1em; }
响应式环绕中容易被忽略的细节
很多人以为媒体查询一加，环绕就自适应了，实际关键在“谁断点、怎么断”。图片浮动后，文字环绕区域由图片宽高比和外边距共同决定，而这两者在不同视口下未必同步变化。
- 避免对
img直接设width: 100%同时又float—— 这会导致浮动失效（因为脱离了“有明确尺寸”的前提） - 文字容器若用了
column-count或grid，会彻底破坏环绕逻辑，优先级高于float - 在移动端，建议小图改用
float: none+margin: 0 auto居中，而不是强行维持环绕——人眼阅读习惯在此场景下已改变
真正难的从来不是写出环绕代码，而是判断此刻用户是否真的需要环绕。多数 CMS 文章页里，所谓“环绕需求”其实只是设计师没想清信息层级，最后靠 float 硬撑，不如回归语义结构本身。
