float 是唯一稳定原生支持文字环绕图片的方案，需在 img 上设 float:left、显式 width 和 margin-right，文字紧跟其后；父容器坍缩须用 display:flow-root 修复；shape-outside 需配合 float 且依赖明确尺寸。
float 是当前唯一稳定、原生支持文字环绕图片的方案，别折腾 inline-block 或 position: absolute——它们根本不是环绕，只是视觉巧合，一缩放就错位。
为什么 float:left 能让文字出现在图片右侧
文字绕排不是靠“把图放右边”，而是让图左浮，文字自动填满它右侧和下方的可用空间。浏览器把浮动后的 <img> 当作一个“障碍物”，行内内容（比如段落文字）会顺着它的边界流动。
-
float: left必须写在<img>标签上，不能写在父容器或文字元素上 - 必须显式设置
width（如width: 200px），仅设max-width: 100%在加载中容易塌陷，导致文字先绕错再重排 - 加
margin-right: 1rem是为了留白，否则文字紧贴图片边缘，可读性差 - 文字元素（如
<p>）必须紧跟在<img>后面，中间不能插display: flex、overflow: hidden或空标签——这些会创建新 BFC，切断环绕流
clear: both 不是“关掉浮动”，而是“换行开始”
clear: both 的作用对象是它自己所在的元素，不是前面的图片。它只说：“我不能出现在任何浮动元素旁边”，所以会强制下移一行，不再参与环绕。
- 想让下一段文字不绕图？给那段
<p style="clear: both">加样式，而不是给图片加 - 别在环绕段落内部加
clear，否则整段都会掉下来 - 首行缩进要用
::first-line，不是靠clear或text-indent混用
父容器高度坍缩不是 bug，是浮动脱离文档流的必然结果
浮动元素脱离正常文档流，父容器无法感知其高度，所以背景色包不住图、边框塌成一条线——这不是渲染错误，是规范行为。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 修复方式一：在父容器上加
display: flow-root（推荐，专为此设计） - 修复方式二：用伪元素闭合：
container::after { content: ""; display: table; clear: both; } - 慎用
overflow: hidden：虽能触发 BFC，但在flex或grid容器里可能截断绝对定位子元素
shape-outside 圆形/不规则绕排的三个硬门槛
shape-outside 不是 float 的升级版，而是叠加层——它只修饰已浮动元素的绕排轮廓，缺一不可。
- 必须已有
float: left或float: right，单独写shape-outside: circle(50%)浏览器直接忽略 - 图片必须有明确尺寸（
width和height或aspect-ratio），否则形状计算无基准 -
shape-outside: url(image.png)在本地file://协议下基本失效，需 HTTP 服务 + CORS 响应头；iOS Safari 对 SVG<path>支持极差，建议优先用circle()或ellipse()
窄屏放弃绕排不是妥协，是阅读效率的底线——强行图文并列会让文字挤成细条，用户得左右滑动才能读完一行。真正难的不是写出 float，而是判断什么时候该删掉它。
