浮动元素后的非浮动元素默认会环绕，文字不绕而是换行，根本原因是后续段落被“挤出正常流”或自身未正确参与环绕布局；需检查图片尺寸、父容器宽度、文字容器是否触发bfc及响应式中浮动清理。
浮动元素后的非浮动元素天然就会环绕——前提是它没被意外“顶下去”或“穿透”。这不是需要额外实现的效果，而是 float 的默认行为；真正要解决的，是为什么有时文字不绕、反而换行了、或者被遮住了。
为什么文字没绕上去，而是从下一行开始？
这是最常被误认为“失效”的现象。根本原因不是 float 没起作用，而是后续段落被浮动“挤出正常流”或自身未正确参与环绕布局。
-
float只影响后续**块级非浮动元素内部的文字流**，不影响该块级元素自身的定位——如果那个p或div自身高度塌陷、或父容器宽度不足，文字就绕不起来 - 图片没设
width（尤其用了max-width: 100%却漏了height: auto），导致浏览器无法计算浮动区域，文字流失去参照 - 父容器没有明确宽度（比如
width: 100%但外层是display: flex或position: absolute），浮动计算失准 - 文字容器本身触发了 BFC（如
overflow: hidden），反而会**阻止环绕**——它把自己关进独立上下文，不再响应外部浮动
margin 应该加在谁身上、加哪几个方向？
环绕间距必须由**浮动元素自己控制**，不是文字容器的事。加错位置，文字就卡住不动。
- 左浮动图片：必须加
margin-right（推荐12px或0.5em）和margin-bottom（如12px），否则下一段文字会顶到图片底部，留大片空白 - 右浮动图片：对应加
margin-left和margin-bottom - 避免用
margin: 10px这类简写——margin-top可能把图片往上顶出父容器，margin-bottom则可能撑开与下一段的距离，破坏视觉节奏
clear 和 BFC 哪个更适合收尾？
二者目的不同：clear 是让某个元素**不参与环绕**，BFC 是让某个元素**避开浮动区域**。选错会导致布局断裂。
- 想结束环绕、让下一块内容独占一行？用
clear: both（加在下一个div或h2上） - 想让紧挨着浮动元素的非浮动块（比如一个
section）不被遮挡、自动绕开浮动区域？给它触发 BFC：overflow: hidden或更现代的display: flow-root -
overflow: hidden虽稳，但别乱加在body或全站容器上——可能意外裁剪position: absolute的弹窗、下拉菜单
shape-outside 为什么没反应？
shape-outside 不是独立属性，它只对已设置 float 的元素生效，且依赖视觉形状匹配。
- 必须同时存在：
float: left（或right）+shape-outside: circle(50%)+border-radius: 50%（否则轮廓和视觉不一致） -
shape-margin必须显式设置（如12px），否则文字会紧贴轮廓边缘，可读性差 - Chrome DevTools 的 Layout 面板里可以直接拖拽调整
shape-outside参数，比反复改 CSS 数值快得多 - 大量使用
shape-outside: polygon()或url()在长文中会触发频繁重排，首屏性能敏感时要节制
真正容易被忽略的是：浮动 + 文字环绕不是“设了就完事”的样式，而是一整套依赖关系——图片尺寸、父容器宽度、后续元素是否触发 BFC、甚至媒体查询里有没有同步清理浮动。任何一个环节断掉，环绕就变成“文字失踪现场”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
