flex容器中设float无效不是bug，而是规范行为：flex子项强制成为弹性项目，float属性被定义为无效果，文字环绕依赖的行盒避让机制无法触发。
Flex容器里直接设float无效？不是bug，是机制冲突
在 display: flex 容器中给子元素（比如 <img>）加 float: left，浏览器会忽略该声明——这不是兼容性问题，而是规范行为。Flex 容器强制所有子项成为弹性项目，float 属性在弹性上下文中被定义为“无效果”。你看到图片没浮动、文字也没绕，是因为它根本没进入浮动流程。
常见错误现象：<div class="flex">
<img src="..." style="max-width:90%"><p>文字</p>
</div>，结果图文并排或堆叠，毫无环绕迹象。
- Flex 子项的定位由
flex-direction、justify-content等控制，不参与行盒（line box）计算，而文字环绕依赖行盒对浮动元素的避让 - 即使把
<p></p>拆成多个<span></span>并手动插入图片前后，也无法触发浏览器原生的环绕重排逻辑 - 若必须用 Flex 做外层结构（如卡片布局），图片和文字应分属不同容器：图片用独立
float区域，文字放在相邻非-Flex 块级容器中
想让文字真正绕图，只能退回到float + 清除浮动
唯一稳定生效的路径仍是传统 float：图片设 float: left 或 float: right，文字保持普通块级流（如 <p></p>），且 HTML 中 <img> 必须出现在文字内容之前。
容易踩的坑：
-
<img>写在<p></p>后面 → 文字已渲染完毕，无法回绕；必须调整 HTML 顺序 - 父容器用了
overflow: hidden、transform或will-change→ 触发新 BFC，截断浮动影响范围，文字只在容器内绕、不延伸 - 图片没设明确宽度（如仅靠
max-width: 100%）→ 某些浏览器下浮动区域计算异常，尤其在响应式缩放时 - 忘记清除浮动 → 后续段落塌陷进当前图文区块，布局错乱
最小可行清除方案：.container::after { content: ""; display: table; clear: both; }
shape-outside 能救场吗？能，但必须和 float 绑定
shape-outside 不是 Flex 的插件，它只作用于已设置 float 的元素。单独写 shape-outside: circle() 对非浮动图片完全无效。
典型误用：
- 给 Flex 容器里的
<img>加shape-outside却不加float→ 属性被忽略 - 用
shape-outside: image()依赖 PNG Alpha 通道，但 Safari 支持不稳定，IE 完全不支持 → 生产环境需降级到ellipse()或inset() - 图片设了
max-width: 100%但没配shape-margin→ 缩放后环绕间隙变窄甚至贴住文字
可用组合示例：img { float: left; width: 30%; shape-outside: ellipse(50% 50% at 50% 50%); shape-margin: 1em; }
响应式下浮动环绕突然失效？大概率是 height 或 max-width 配置失衡
文字从绕图变成“掉到图片下方”，往往不是 CSS 写错了，而是图片尺寸失控导致浮动区域高度坍缩。
关键检查点：
- 图片是否同时设置了
max-width: 100%和height: auto？缺后者会导致比例错乱、高度计算异常 - 媒体查询中是否意外覆盖了
float（如@media (max-width: 768px) { img { float: none; } }）？这会让环绕彻底退出 - 文字容器是否加了
word-break: break-word？纯英文/数字长串无空格时，浏览器无法换行，右侧留白巨大，看起来像“绕失败”
复杂点在于：浮动环绕是流式计算，每行文字都要实时测量浮动边界。任何影响高度、宽度或 BFC 状态的改动，都可能打断这个链路——它不像 Flex 那样“静态分配”，而是持续响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
