最核心限制是html顺序和父容器是否兜得住浮动元素：图片必须在文字前，父容器需清除浮动；否则文字不环绕、高度塌陷。
直接用 float 实现文字环绕图片，最核心的限制不是 CSS 写得对不对，而是 HTML 顺序和父容器是否“兜得住”浮动元素——这两点错了，再调 margin 也没用。
图片必须写在文字内容前面
浏览器按 HTML 流式顺序渲染，float 只影响它之后的块级内容。如果 <img> 放在 <p></p> 后面，文字已经流完了，根本没机会绕回来。
- 正确结构：
<img src="a.jpg" style="max-width:90%"><p>这段文字会从右边开始环绕</p> - 错误结构：
<p>这段文字已渲染完毕</p> <img src="a.jpg" style="max-width:90%">→ 文字完全不绕 - CMS 或富文本输出不可控时，别硬改 CSS，改用
shape-outside或把图文包进display: grid容器里做显式定位
父容器高度塌陷必须处理
float 让图片脱离文档流，父容器计算高度时直接忽略它，结果边框包不住、背景色断掉、后续段落顶上来。
- 轻量解法：给父容器加
overflow: hidden（兼容 IE8+，但会意外裁剪溢出内容） - 稳妥解法：用伪元素清除浮动，例如
.wrap::after { content: ""; display: table; clear: both; } - 别在下一个
<p></p>上写clear: both—— 它只清自己前面的浮动，不帮父容器“撑高”
图文间距和方向要匹配
float: left 的图片，文字从右边来，所以空白必须加在图片右侧；反着设 margin-left 没效果。
- 左浮动配
margin-right，右浮动配margin-left，上下 margin 在环绕中基本无效 - 至少设
margin-right: 1rem（或具体像素值），否则文字紧贴图片边缘，可读性差 - 如果文字行高太小或图片
vertical-align是默认baseline，首行可能错位，可试vertical-align: top
别和 Flex/Grid 混用
现代布局容器（比如 display: flex 的 <section></section>）会重置子项的浮动行为，float 可能直接失效或被拉平成 inline 元素。
- 同一容器内，要么全用
float做图文混排，要么全用display: grid+grid-template-areas控制图文位置 - 响应式场景下，小屏建议用媒体查询关掉浮动：
@media (max-width: 768px) { img { float: none; display: block; margin: 0 auto; } } -
float本身性能无压力，但维护成本高——它不是为复杂布局设计的，只是排版遗留机制
真正容易被忽略的是：浮动生效的前提是“图片参与流式布局”，所以别给它加 display: block 或 margin: auto，也别套在 position: absolute 容器里——这些操作会直接切断环绕能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
