css无法直接复刻word的多图混排+任意环绕效果，需用float+严格html顺序+clear控制实现单图左右环绕等常用场景；图片必须置于文字前，否则浮动失效；多图错落需用clear分隔图文流；shape-outside需配合float且手动定义形状；父容器塌陷需触发bfc；复杂布局应转向grid或绝对定位。
不能直接复刻 Word 的“多图混排+任意环绕”效果，CSS 没有原生的“图文流式嵌套”模型；但用 float + 严格 HTML 顺序 + 清除控制，可逼近最常用场景（单图左/右环绕、多图错落、段落级隔离）。
图片必须写在文字前面，否则 float 失效
这是最常踩的坑：浏览器只让**后续的普通流内容**环绕浮动元素。如果 <img> 放在 <p></p> 后面，文字早已渲染完毕，“绕回来”在技术上不可能。
- ✅ 正确结构：
<img src="a.jpg"><p>这段文字会环绕它</p> - ❌ 错误结构：
<p>这段文字不会绕回去</p> <img src="a.jpg"> - 若 CMS 或 Markdown 输出无法改顺序（如某些编辑器把图插在段落后），
float就不适用，得换shape-outside或 Flex/Grid 布局模拟
多图混排时，clear 控制每张图的“作用域”
连续放两张 float: left 图片，默认会并排左对齐，文字从它们右侧整体环绕——这不是 Word 那种“图1左、图2右、文字穿插其中”的效果。要实现错落，得手动切分文字流。
- 第一张图左浮 + 第一段文字 →
<img class="left"><p>第一段</p> - 加
<div style="clear: both"></div>强制结束前一轮环绕 - 第二张图右浮 + 第二段文字 →
<img class="right"><p>第二段</p> -
clear: both不是可选技巧，是控制图文作用范围的必要开关
float + shape-outside 能绕非矩形，但限制极多
想让文字贴着 PNG 边缘走？shape-outside 确实支持，但它不是“自动识别轮廓”，而是依赖你手动定义形状，且必须配合 float 才生效。
- 缺一不可：
float: left+shape-outside: circle(50%)+ 明确width/height -
shape-outside: url(logo.png)要求图片同源、带 Alpha 通道、iOS Safari ≥16.4 才可靠；Android WebView 基本不建议用 - 响应式下必须重写整个
shape-outside值，比如小屏时改用polygon(0 0, 100% 0, 100% 80%, 20% 100%)，不能只调width - 调试时先加
outline: 1px solid red看浮动盒是否被父容器overflow: hidden截断
父容器塌陷会导致整个布局错位
浮动元素脱离文档流，其父容器（比如 <article></article>）高度可能坍缩为 0，导致后续区块上移、盖住图文区。
- 简单修复：
.article { overflow: hidden; }（触发 BFC） - 更稳妥的 clearfix：
.clearfix::after { content: ""; display: table; clear: both; } - 别用
display: flex或display: grid包裹浮动图——Flex/Grid 容器会忽略float，环绕立刻失效
真正复杂的多图混排（比如三图呈三角分布、文字穿插其间），float 已到能力边界；此时应放弃“环绕”思路，改用 Grid 定义图文轨道，或用 position: absolute + z-index 手动堆叠，再靠 margin 预留文字空间——CSS 没有 Word 那套排版引擎，所谓“类似”，本质是取舍与妥协。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
