图片下方空白源于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></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<div>），它们默认会“避开”浮动区域，造成右侧视觉留白。
<ul>
<li>给第一个环绕文字的 <code><p></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 反而让结构变脆。绕与不绕，得先看内容关系，再选技术手段。
