必须图片在文字前、父容器闭合、图片有明确width，缺一即导致文字下沉而非环绕；float仅影响后续行内流，对块级元素如无效，且需配合margin和display:flow-root等样式才能稳定图文流。
能实现，但必须满足三个硬条件：图片在HTML中写在文字前面、父容器正确闭合、图片自身有明确宽度。漏掉任意一个，文字就会“掉到图下面”，而不是绕上去。
为什么加了 float: left 文字还是从下一行开始？
这不是 CSS 写错了，而是浮动只影响后续的行内流内容，对块级元素（比如紧跟着的 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/gongju/2905" title="CSS"><img
src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/gongju/2905" title="CSS">CSS</a>
<p>CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p>
</div>
<a href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>）无效。常见原因：
- 图片和文字不在同一个父容器里——必须共用一个
<div> 或 <code><article></article> - 父容器没闭合：浮动让图片脱离文档流，父容器高度坍缩为 0，导致后续段落顶上来
- 图片没设
width（尤其在 Flex/Grid 容器中，float行为会异常） -
margin加错了位置：必须加在<img alt="如何在CSS中实现文字环绕图片的经典浮动效果？" >上，而不是文字容器上 - 给图片设固定宽度，例如
width: 200px；避免只用max-width: 100%却漏掉height: auto - 加
margin-right: 1em（左浮动）或margin-left: 1em（右浮动），控制文字侧边距离 - 加
margin-bottom: 0.8em，防止下一段<p></p>紧贴图片底部，留出合理呼吸空间 - 给父容器加
display: flow-root（推荐）或overflow: hidden，防止塌陷 - 写法必须是：
float: left; shape-outside: circle(50%);，少了float就完全无效 -
shape-margin很关键：不设的话文字会紧贴轮廓边缘，建议至少shape-margin: 12px - Chrome DevTools 的 Layout 面板里点开
shape-outside可拖拽实时调整，比反复改 CSS 数值快得多 - 用
url(logo.svg)时，确保 SVG 有透明背景且 alpha 通道完整，否则轮廓识别失败 - 媒体查询里改了
float，但忘了同步移除shape-outside和shape-margin（它们在非浮动元素上被忽略） - 原先靠
clear: both分隔的段落，浮动取消后变成普通流，可能堆叠错位 - 父容器还挂着
overflow: hidden，窄屏下容易意外裁剪内容 - 图片用了
max-width: 100%却没设height: auto，窄屏下被压扁，shape-outside计算偏移
float 必须配哪些样式才能稳住图文流？
光写 float: left 是不够的，以下四项缺一不可：
shape-outside 能不能单独用？怎么调试才不靠猜？
不能。shape-outside 必须配合 float 才生效，它只是“重定义环绕路径”，不是替代方案。
立即学习“前端免费学习笔记（深入）”；
响应式下浮动突然失效，该重置哪些东西？
小屏取消浮动不是只写 float: none 就完事。常见连锁问题：
真正容易被忽略的是：浮动 + shape-outside 在长文首屏大量使用时，尤其是 polygon() 或 url() 形状，会触发频繁重排。别为了一个酷炫轮廓，让首屏渲染慢半秒。
