最稳文字环绕需先让<img>左浮动并置于文字前，设显式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% 是父容器“截断”了浮动上下文，不是样式写错了。

• 父容器用了 display: flex 或 display: grid：浮动在这些布局中基本失效，文字不会绕，得改用 align-self: start + margin 模拟并排
• 父容器设了 overflow: hidden 或 contain: layout：会创建新 BFC，把浮动“关在里面”，文字绕不进去
• 图片被包在 <div style="display: block"> 里：切断了与段落的行内流关系，文字根本感知不到浮动图的存在
• 写了 vertical-align: top 等属性：浮动后它已失效，但某些旧 CSS 可能干扰基线计算，间接导致换行异常

shape-outside 想绕非矩形？先过三关

shape-outside 不是“加了就绕”，它只修饰已浮动元素的轮廓，漏掉任意一环，浏览器直接忽略该声明。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 必须同时有 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 看浮动元素真实范围，再叠一层半透背景验证形状是否对齐

响应式下环绕突然崩了？检查断点里的 float

媒体查询里常有人写 @media (max-width: 768px) { img { float: none; } }，却忘了清除之前浮动的影响，结果小屏下图片归位，但文字还卡在老位置不动。

立即学习“前端免费学习笔记（深入）”；

• 如果取消浮动，务必同步加 clear: both 到后续段落（如 <p style="clear: both">），而不是指望图片自己“收场”
• 别在浮动图的同一段落里加 clear，否则整段文字都会掉到图下方
• 想让小屏下图文上下排列而非环绕，更稳妥的做法是：用 display: flow-root 包父容器（现代方案），或用伪元素 ::after { content: ""; display: table; clear: both; }（兼容 IE8+）

实际中最容易被忽略的，是图片尺寸的确定性——float 布局依赖明确宽度触发文本重排，max-width: 100% 没有基准，就是隐患源头。