必须图片在文字前、父容器闭合、图片有明确width，缺一即导致文字下沉而非环绕；float仅影响后续行内流，对块级元素如无效，且需配合margin和display:flow-root等样式才能稳定图文流。

能实现，但必须满足三个硬条件：图片在HTML中写在文字前面、父容器正确闭合、图片自身有明确宽度。漏掉任意一个，文字就会“掉到图下面”，而不是绕上去。

为什么加了 float: left 文字还是从下一行开始？

这不是 CSS 写错了，而是浮动只影响后续的行内流内容，对块级元素（比如紧跟着的

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

）无效。常见原因：

• 图片和文字不在同一个父容器里——必须共用一个
  或
• 父容器没闭合：浮动让图片脱离文档流，父容器高度坍缩为 0，导致后续段落顶上来
• 图片没设 width（尤其在 Flex/Grid 容器中，float 行为会异常）
• margin 加错了位置：必须加在 上，而不是文字容器上

float 必须配哪些样式才能稳住图文流？

光写 float: left 是不够的，以下四项缺一不可：

• 给图片设固定宽度，例如 width: 200px；避免只用 max-width: 100% 却漏掉 height: auto
• 加 margin-right: 1em（左浮动）或 margin-left: 1em（右浮动），控制文字侧边距离
• 加 margin-bottom: 0.8em，防止下一段
  紧贴图片底部，留出合理呼吸空间
• 给父容器加 display: flow-root（推荐）或 overflow: hidden，防止塌陷

shape-outside 能不能单独用？怎么调试才不靠猜？

不能。shape-outside 必须配合 float 才生效，它只是“重定义环绕路径”，不是替代方案。

• 写法必须是：float: left; shape-outside: circle(50%);，少了 float 就完全无效
• shape-margin 很关键：不设的话文字会紧贴轮廓边缘，建议至少 shape-margin: 12px
• Chrome DevTools 的 Layout 面板里点开 shape-outside 可拖拽实时调整，比反复改 CSS 数值快得多
• 用 url(logo.svg) 时，确保 SVG 有透明背景且 alpha 通道完整，否则轮廓识别失败

响应式下浮动突然失效，该重置哪些东西？

小屏取消浮动不是只写 float: none 就完事。常见连锁问题：

• 媒体查询里改了 float，但忘了同步移除 shape-outside 和 shape-margin（它们在非浮动元素上被忽略）
• 原先靠 clear: both 分隔的段落，浮动取消后变成普通流，可能堆叠错位
• 父容器还挂着 overflow: hidden，窄屏下容易意外裁剪内容
• 图片用了 max-width: 100% 却没设 height: auto，窄屏下被压扁，shape-outside 计算偏移

真正容易被忽略的是：浮动 + shape-outside 在长文首屏大量使用时，尤其是 polygon() 或 url() 形状，会触发频繁重排。别为了一个酷炫轮廓，让首屏渲染慢半秒。