文字环绕图片失效主因是父容器触发BFC、文字容器用flex/grid、或clear元素干扰；float适合IE9+兼容场景，flex需配合wrap/order实现响应式；复杂绕图应选shape-outside或CSS Grid。
float 布局下文字环绕图片的常见失效原因
用 float: left 让图片左浮，文字本该自动绕排，但经常“不绕”——多半是父容器触发了 BFC（比如加了 overflow: hidden），或文字容器设置了 display: flex / display: grid，直接切断了浮动流的参与资格。另外，clear 元素如果紧挨着浮动元素，也会把文字“推到下一行”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保文字所在块级元素没意外触发 BFC（如删掉
overflow: auto） - 避免在浮动同级或父级使用
display: flex或display: grid - 给图片加
margin-right，否则文字会紧贴图片边缘 - 若需控制环绕高度，可对图片设
max-width: 100%+height: auto，防止溢出容器
flex 布局中让文字和图片按视觉顺序排列但 DOM 顺序不变
Flex 不支持传统“文字绕图”，但它能通过 order 属性调整渲染顺序，配合 flex-wrap 和 align-items 控制对齐。关键点在于：DOM 顺序决定语义和可访问性，而 order 只影响视觉流。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
display: flex和flex-direction: row - 图片设
order: 1，文字设order: 2（默认为 0），即可让图片在前、文字在后，哪怕 HTML 中文字写在前面 - 若需文字“包裹”图片右侧+下方，得拆成多个 flex 项（如文字分两段），或改用
grid+area定位 - 注意
order不影响 tab 键焦点顺序，屏幕阅读器仍按 DOM 顺序读取
float 和 flex 在响应式场景下的兼容性差异
float 能自然回流（小屏时图片上移、文字占满宽度），但需要手动清浮动；flex 默认不回流，要靠 flex-wrap: wrap + 媒体查询调 flex-basis 或 order 才能模拟类似效果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯图文混排且需强兼容 IE9+？选
float，但务必加::after { content: ""; display: table; clear: both; }清浮动 - 现代项目且需精确控制换行断点？用
flex，配合@media (max-width: 768px)设flex-direction: column - 避免在 flex 容器里混用
float—— 浮动元素会脱离 flex 流，尺寸计算异常 - 图片用
max-width: 100%+height: auto，否则 flex 下可能撑破容器
文字绕图需求复杂时，为什么别硬扛 float 或 flex
当出现“图片居中、文字从左+右+下三侧环绕”“多张浮动图交错排布”“绕图区域含内联代码块或引用”等情况，float 的清除逻辑极易失控，flex 则根本无法实现环绕。这时应转向 shape-outside（配合 clip-path 或 circle()）或 CSS Grid 的 grid-template-areas 显式划分区域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
shape-outside仅支持块级浮动元素，且需同时设float和width才生效 - Grid 更适合固定结构的图文混排，但老版本 Safari 对
subgrid支持差，慎用于嵌套绕图 - 绕图区域若有动态内容（如用户上传图），优先考虑服务端生成
shape-outside的url(image.svg)路径，而非 JS 计算
float 的脆弱性和 flex 的非绕性就会立刻暴露——这时候花十分钟配好 shape-outside 或切一块 grid 区域，比反复调 margin 和 order 更省事。 
