图片下方空白源于img默认基线对齐预留下行间距，修复需设vertical-align:top等并重置line-height:0；float仍是图文环绕最轻量兼容方案，Grid/Flexbox不适用；响应式需媒体查询取消float改用块级居中。

float 实现图文环绕时为什么图片下面总有一块空白？

因为 <img> 默认是行内替换元素，浏览器会为它预留下行间距（用于字母如 g、y 的下伸部分），即使设置了 float: left，这个基线对齐行为依然生效。

• 最直接的修复：给图片加 vertical-align: top 或 middle 或 bottom（推荐 top）
• 别只写 float 就完事，漏掉 vertical-align 是图文紧贴失败的最常见原因
• 如果父容器有 line-height 较大，也会放大这块空白，此时需同时重置图片所在行的 line-height: 0

现代布局中该用 float 还是 CSS Grid / Flexbox？

单纯文字绕图，float 仍是最轻量、兼容性最好、语义最明确的方案；Grid 和 Flexbox 本质是二维布局工具，强行用来做环绕反而增加复杂度且不自然。

• float 支持所有浏览器（包括 IE6），且文本流自动适应，无需额外包裹或计算
• shape-outside 可以实现非矩形环绕（比如圆形、多边形），但需配合 float 使用，且仅支持现代浏览器
• 用 Grid 把文字拆成多段再拼，或用 Flex 强制换行对齐，都会破坏段落连续性，不利于可读性和 SEO

如何让文字只环绕左侧图片、右侧不留空？

关键在清除浮动后的布局干扰——如果图片后紧跟其他块级元素（如 <p>、<div>），它们默认会“避开”浮动区域，造成右侧视觉留白。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 给第一个环绕文字的 <p> 设置 clear: both 或 clear: left（视情况）
• 更稳妥的做法：用伪元素清除浮动，例如在图片父容器末尾加 ::after { content: ""; display: table; clear: both; }
• 避免给图片父容器设固定高度，否则可能截断后续文字流

响应式场景下 float 图文环绕崩了怎么办？

当屏幕变窄，图片宽度缩小时，float 仍会占据原位置空间，导致文字被“挤”到下方而非重新流式环绕。

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

• 必须配合媒体查询重置：小屏时取消 float，改用 display: block; margin: 0 auto; 让图片居中，文字自然上下排列
• 图片宽高建议用相对单位（%、max-width: 100%），避免固定 px 值卡死布局
• 不要依赖 width + float 硬控两栏比例，移动端优先考虑单列流式，图文顺序按语义调整

真正难的不是让文字绕着图片跑，而是判断什么时候不该绕——比如列表项里的图标、数据卡片中的头像、或者需要精确对齐的说明图。这些场景硬套 float 反而让结构变脆。绕与不绕，得先看内容关系，再选技术手段。