最稳文字环绕需先让左浮动并置于文字前，设显式width和margin-right；父容器禁用flex/grid/overflow:hidden；shape-outside需配合float及明确尺寸；响应式中取消浮动须同步clear。
直接给 <img> 加 float: left 最稳
文字环绕不是靠“把图放右边”，而是让图左浮后，文字自动填它右侧和下方的空白。浏览器把浮动后的 <img> 当作不可穿透的障碍物，段落文字顺着它的右边界流动。
-
<img>必须写在文字内容之前（HTML 顺序决定环绕起点） - 必须显式设
width，比如width: 200px或width: 30vw；只用max-width: 100%会导致加载时占位塌陷、文字先绕错再重排闪动 - 加
margin-right: 12px（或类似值）留出文字间距，避免贴得太紧 - 别给
<img>设display: block或margin: auto，它默认是行内级，改了就脱离文本流，环绕失效
为什么文字没绕、图片沉底、后续段落卡住
90% 是父容器“截断”了浮动上下文，不是样式写错了。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器用了
display: flex或display: grid：浮动在这些布局中基本失效，文字不会绕，得改用align-self: start+margin模拟并排 - 父容器设了
overflow: hidden或contain: layout：会创建新 BFC，把浮动“关在里面”，文字绕不进去 - 图片被包在
<div style="display: block"> 里：切断了与段落的行内流关系，文字根本感知不到浮动图的存在 <li>写了 <code>vertical-align: top等属性：浮动后它已失效，但某些旧 CSS 可能干扰基线计算，间接导致换行异常 - 必须同时有
float: left（或right），且不能被后续规则覆盖成float: none - 元素必须有明确尺寸：
width和height（或height: auto配合固定宽）；aspect-ratio在 Safari 15.4 以下不支持 - 若用
shape-outside: url("mask.png")：PNG 必须跑在 HTTP 服务上（file:// 协议必失效），且 alpha 通道要干净（无抗锯齿毛边），响应头需含Access-Control-Allow-Origin: * - 调试时加
outline: 1px solid red看浮动元素真实范围，再叠一层半透背景验证形状是否对齐 - 如果取消浮动，务必同步加
clear: both到后续段落（如<p style="clear: both"></p>），而不是指望图片自己“收场” - 别在浮动图的同一段落里加
clear，否则整段文字都会掉到图下方 - 想让小屏下图文上下排列而非环绕，更稳妥的做法是：用
display: flow-root包父容器（现代方案），或用伪元素::after { content: ""; display: table; clear: both; }（兼容 IE8+）
shape-outside 想绕非矩形？先过三关
shape-outside 不是“加了就绕”，它只修饰已浮动元素的轮廓，漏掉任意一环，浏览器直接忽略该声明。
响应式下环绕突然崩了？检查断点里的 float
媒体查询里常有人写 @media (max-width: 768px) { img { float: none; } }，却忘了清除之前浮动的影响，结果小屏下图片归位，但文字还卡在老位置不动。
float 布局依赖明确宽度触发文本重排，max-width: 100% 没有基准，就是隐患源头。
