现代响应式图文混排应弃用 float，改用 flex 实现并列自适应（flex-wrap + min-content），或 column-count 实现文字环绕；shape-outside 仅限需精确绕图时配合 float 使用。
float 布局在现代响应式图文混排中基本不可靠
用 float 实现图文环绕（比如文字绕图片）看似简单，但一加媒体查询就容易崩：float 本身不参与 flex/grid 流，clear 行为在不同断点下难以预测，尤其当图片宽高比变化、或文字行数动态增减时，常出现文字卡在上一行末尾、留白错位、甚至整个段落塌陷。
实际项目里，除非要兼容 IE8–9（现在几乎不存在），否则别碰 float 做响应式图文混排。它和 @media 配合就像拿胶带修齿轮——能动，但每次 resize 都心慌。
- 移动端
float: left后文字不换行？大概率是父容器没触发 BFC，加overflow: hidden暂时掩盖，但断点切换后失效 -
float元素脱离文档流，后续元素的 margin/padding 计算基准会漂移，调试时看渲染结果比看 CSS 更快 - 如果必须用（如遗留系统），至少把图文容器设为
display: flow-root，避免清除浮动污染全局
flex 实现图文并列+自适应换行的关键控制点
真正靠谱的做法是用 display: flex 控制整体结构，再用 flex-wrap: wrap 和 min-width 约束子项，让图和文块在窄屏自动堆叠，宽屏并排。重点不是“怎么写 flex”，而是“哪些值不能乱设”。
常见错误是给图片容器设死宽度（如 width: 300px），导致小屏溢出；或对文字区域用 flex: 1 却忽略最小内容宽度，造成文字被强行压缩到无法阅读。
- 图片区域用
flex: 0 0 auto+max-width: 100%，确保它按自身尺寸收缩，不拉伸也不溢出 - 文字区域用
flex: 1 1 min-content，其中min-content是关键——告诉浏览器“至少给我一行字的空间”，避免文字被压扁 - 整个 flex 容器加
gap: 1rem替代 margin，避免在换行时产生意外间隙
```css
.article-figure {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.figure-img {
flex: 0 0 auto;
max-width: 100%;
}
.figure-text {
flex: 1 1 min-content;
}
```
图文环绕（文字绕图）只能靠 CSS Shapes？不，用 shape-outside 要小心三件事
真要实现传统杂志式的文字绕图（非并列），shape-outside 是唯一原生方案，但它不是“设了就灵”。浏览器支持虽已稳定（Chrome/Firefox/Safari 均支持），但有三个硬限制经常被忽略。
- 必须配合
float使用（哪怕只 float 图片），单独用shape-outside无效 - 形状数据必须是
url()（SVG 路径）或circle()/polygon()等函数，不能是 class 名或变量 - 如果图片是响应式（
max-width: 100%），shape-outside的坐标系不会自动缩放，得用clip-path或 SVG 内联路径保比例
示例中这个写法看着对，但小屏下会失效：
```css
img.rounded {
float: left;
shape-outside: circle(50%);
width: 200px; /* 问题在这里：固定宽，shape 不随缩放变 */
}
```
移动端优先时，别用 flex 做图文环绕，改用 column-count + break-inside
当目标是“长文内嵌图+文字自然分栏环绕”，比如新闻详情页，flex 或 grid 反而太重。更轻、更稳的方案是用多列布局 + 强制图片独占一列。
核心思路：把整段文字设为 column-count: 2，再让图片用 break-before: column 和 break-after: column 锚定位置，浏览器会自动把图前后文字分到不同列，形成视觉环绕效果。
- 必须加
column-gap: 1.5rem，否则两列文字挤在一起，图看起来像插在缝里 - 图片需设
width: 100%且包裹在<figure></figure>中，否则break-before在某些 Safari 版本下不生效 - 测试时重点关注 iOS 15–16，旧版 Safari 对
break-inside: avoid支持不稳定，文字可能在图中间断开
实际做响应式图文混排，最麻烦的从来不是“怎么排”，而是“图和文谁决定高度”。一旦图片加载慢、或文字长度动态变化，flex 的交叉轴对齐、column 的断行逻辑就会互相打架。留出足够垂直余量，比调对某个属性更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
