多图混排错位的根本原因是容器未形成bfc且图片未脱离文本流；应为每张图包裹语义化容器（如），外层设display: flex + flex-wrap: wrap，单图容器用flex: 0 0 auto并配合gap，禁用裸混排。
多图混排时图片堆叠或溢出，根本不是尺寸问题
直接给 img 设 width: 100% 或 max-width: 100% 并不能解决多图混排的错位——真正卡住的是容器没形成独立的 BFC，且图片未脱离文本流干扰。常见现象是：三张图写在同一个 <p></p> 里，结果第二张图被第一张的换行挤到下一行右侧，第三张又塌陷到左下角。
实操建议：
- 每张图必须包裹在语义化容器中，比如
<figure></figure>或带class="media-item"的<div>，禁止裸 <code><img>直接混在段落里 - 外层图文容器设
display: flex+flex-wrap: wrap，但**不设width**，让浏览器按内容自然撑开 - 单图容器用
flex: 0 0 auto，确保它不拉伸、不压缩、只按自身尺寸占位 - 加
gap: 0.75rem替代margin，避免换行后首尾间隙错乱 - 仅当需要「文字紧贴图片轮廓」（如圆形头像、斜切卡片）时，才启用
shape-outside - 此时图片容器必须是
float: left或right，且父容器需触发 BFC：display: flow-root或overflow: hidden - 其余图文模块仍走 Flex 布局，
shape-outside只作用于单个<figure></figure>，不参与整体 flex 排序 - 测试重点：Safari 对
shape-outside: circle()支持稳定，但path()在旧版 iOS 上会回退为矩形 - 确认父容器有
display: flex且无display: contents的子元素干扰布局流 - 移动端要文字在上、图片在下，就用
flex-direction: column+order；桌面端切回row时，order值需重置（比如图片从order: 2改为order: 0） - 避免极端值，
order: -999或999在旧版 Safari 中解析不稳定，统一用0/1/2 - 如果图文模块是列表（如多张卡片），
order必须作用在卡片级容器上，而非卡片内部的图片或文字——否则flex-wrap: wrap会按“每行独立排序”，造成视觉断层 - 所有
<img>必须带max-width: 100%和height: auto，缺一不可 - 图片容器用
flex: 0 0 auto，文字区域用flex: 1 1 min-content，其中min-content是关键——它告诉浏览器“至少给我一行字的空间”，防止文字被压扁 - 避免对 flex 子项同时设
width和order，Firefox 旧版本会错乱 - 如果图片需保持固定宽高比（如 16:9 封面图），用
aspect-ratio: 16 / 9+object-fit: cover，比 JS 计算 padding-top 更可靠
文字环绕图片？别用 float，改用 shape-outside + flex 组合
float 在多图混排中基本不可控：加了媒体查询后，clear 行为在不同断点下表现不一致，尤其当图片高宽比变化或文字行数动态增减时，常出现文字卡在上一行末尾、留白错位、甚至整段塌陷。
实操建议：
order 控制图文顺序时，为什么写了没反应
写了 order: 2 却没生效，90% 是因为父容器没设 display: flex，或者子项被 display: contents 干扰；剩下 10% 是用了 position: absolute 或 float，这两者会让 order 完全失效。
实操建议：
响应式断点切换后图片被拉伸或裁剪
小屏下图片变形，往往不是 height 没设 auto，而是容器本身被 flex 压缩了。典型场景：文字区域用了 flex: 1，但图片容器也设了 flex: 1，两者争宽度，图片被迫拉伸以填满。
实操建议：
order、gap、flex-wrap 都只是在补漏洞。
