float: left 实现图文环绕需满足四条件：图片标签必须在文字前；设 width 和 margin-right 避免塌陷与紧贴；父容器不能触发 BFC（如 overflow: hidden）；浮动后须清浮（推荐 display: flow-root）。
float: left 是让图片出现在文字左侧并实现环绕的最直接方式，但仅加这行样式大概率失效——关键在 HTML 顺序、宽高约束和浮动清除。
图片必须写在文字前面，否则不环绕
浏览器按 HTML 文本流顺序渲染，只有图片标签出现在段落 <p> 之前，文字才会从第一行开始绕排：
- ✅ 正确：
<img src="a.jpg" style="float:left"><p>这里是正文……</p> - ❌ 无效：
<p>这里是正文……</p><img src="a.jpg" style="float:left">（文字已结束，无内容可绕）
必须设 width + margin-right，否则图文紧贴或塌陷
float 不改变元素默认尺寸行为，未设宽高的 <img> 在浮动后可能收缩、错位，甚至被后续内容“顶”下去：
- 务必设置明确
width（如width: 180px），避免依赖max-width: 100%导致加载时占位塌陷 - 加
margin-right: 12px（或类似值）留出文字间距，否则文字会紧贴图片边缘，可读性差 - 不要设
margin-bottom——它在浮动中常被忽略，还可能触发意外重排
父容器别触发 BFC，否则浮动被截断
如果图片“沉底”、文字不绕、后续段落错位，大概率是父容器无意中触发了块级格式化上下文（BFC），把浮动框拦住了：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 典型干扰样式：
overflow: hidden、display: flex、display: grid、display: table - 修复方法：移除这些属性；或改用更安全的
display: flow-root（专为包裹浮动设计，无副作用） - 若必须保留
overflow: hidden，请确认它不是为“清除浮动”而加的——那是过时做法，已有更优替代
浮动后必须清浮，否则影响后续块级元素
float 只影响它之后的**文本流**，但后面的 <p>、<div> 等块级元素会卡在图片下方，造成布局断裂：
- 简单法：在浮动图片所在段落末尾加
<div style="clear:both"></div> - 推荐法：给父容器加
display: flow-root，一行解决，不加冗余标签 - 注意：不要对浮动图片本身设
clear，那会把它“推”到下一行，失去环绕意义
真正容易被忽略的是：浮动生效的前提是“有真实文字可绕”。如果段落太短、只有一两句话，或者父容器高度被硬编码卡死，环绕效果根本不会显现——这不是样式没写对，而是内容条件不满足。
