float 是唯一稳定、原生支持文字环绕图片的方案，必须将 float 写在 标签上并设置明确宽度，且图片需位于文字前；父容器需用 flow-root 或伪元素清除浮动；小屏应退回到图上文下布局。
float 是唯一稳定、原生支持文字环绕图片的方案，其他写法不是真环绕，缩放或加载时必错位。
为什么必须把 float 写在 <img> 上
文字环绕不是靠“把图放右边”，而是浏览器把浮动后的 <img> 当作一个不可穿透的障碍物，段落文字按行内流自动填满它右侧和下方的空间。如果把 float: left 写在父容器或文字 <p></p> 上，根本不会触发环绕。
- 错误写法：
<div style="float: left"><img src="a.jpg"></div> <p>文字</p>—— 文字完全不绕 - 正确写法：
<img src="a.jpg" style="max-width:90%"><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> -
<img>必须出现在 HTML 流中文字之前，否则文字没机会“绕”
width 不设就塌，max-width: 100% 不是万能解
浮动布局依赖明确宽度触发文本重排。只写 max-width: 100% 而没给基准宽度（比如父容器无宽、或图片未加载），会导致占位塌陷 → 文字先绕错位置 → 图一出来就闪动重排。
- 推荐显式值：
width: 200px、width: 30vw或配合aspect-ratio（Safari 15.4+） - 响应式可用媒体查询分段控制：
@media (max-width: 600px) { img { width: 100%; } } - 别用
height单独撑开，float布局不靠高度计算环绕流
父容器高度坍缩不是 bug，是必须处理的常识
浮动元素脱离文档流，父容器感知不到高度，背景色包不住图、边框“悬空”——这不是样式失效，是机制使然。
- 最稳妥闭合方式：
div { display: flow-root; }（现代标准，IE 不支持） - 兼容老浏览器：
div::after { content: ""; display: table; clear: both; } - 慎用
overflow: hidden：虽能触发 BFC，但会截断position: absolute子元素 - 绝对不能用
display: flex或display: grid包float图文 —— 浮动直接失效
小屏必须放弃环绕，不是“调小尺寸”就能解决
窄屏强行图文并列，文字挤成细条，阅读效率暴跌。响应式不是让绕排更小，而是主动退回到“图上文下”结构。
- 关键断点建议：
@media (max-width: 600px) { img { float: none; display: block; margin: 0 auto; } } - 别指望
shape-outside在移动端稳定工作：iOS Safari 对 SVG<path></path>支持极差，本地file://下url()基本失效 - 首行缩进要用
::first-line，别在环绕段落里加clear: both—— 整段都会掉下来
真正容易被忽略的是：浮动本身没问题，但一旦父容器创建新 BFC（比如加了 overflow: hidden 或用了 flex），环绕就立刻中断 —— 这不是代码写错了，是布局上下文被切断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
