直接给文字容器加overflow:hidden能阻止环绕，实为触发bfc使容器纳入浮动元素并强制文字在边界内重排；但需有width/max-width约束，否则仍可能绕回，推荐用display:flow-root替代，语义清晰无裁剪副作用。
直接给文字容器加 overflow: hidden 能阻止环绕，但不是靠“隐藏”
它实际是触发 BFC（块级格式化上下文），让文字容器重新把浮动图片纳入高度计算，并强制文字在自身边界内重排。效果是文字不再向浮动区域延伸，但前提是这个容器得有明确的宽度约束——比如设了 width 或 max-width。
常见误用：
- 给
<img>加overflow: hidden：完全无效，<img>不是文本容器，不参与换行逻辑 - 给
<p></p>加但没设宽度：BFC触发了，可容器宽度由内容撑开，文字仍可能从右侧“绕回来” - 在
flex子项里加：flex item默认不响应overflow对布局的影响，BFC触发但不起隔离作用
更安全的写法是用 display: flow-root
这是专为创建无副作用 BFC 设计的属性，Chrome 58+/Firefox 57+ 均支持。它不改变 overflow 行为（比如仍可设 overflow: visible），也不会意外裁剪弹窗、阴影或 position: absolute 元素。
示例只需一行：
.content { display: flow-root; }
比 overflow: hidden 更干净，尤其适合图文混排中需要保留溢出内容（如 tooltip、下拉菜单）的场景。
为什么不能只靠 clear: both 放在文字上
clear: both 确实能把某段文字“推”到浮动图片下方，但它解决的是位置错乱，不是环绕本身。而且它依赖 HTML 顺序：一旦图片被移除、或后续插入新元素，clear 就可能变成冗余甚至破坏布局的代码。
真正要阻止环绕，得从文字容器自身入手，而不是靠“推走”它。否则多图混排、响应式换行时极易失控。
容易被忽略的方向性与嵌套干扰
如果文字容器设了 direction: rtl，而父级是 ltr，text-overflow: ellipsis 的省略号位置可能异常；更隐蔽的是，若文字容器内部还嵌套了另一个 BFC（比如子元素也用了 display: flow-root），外层的隔离效果会被局部削弱——环绕可能在子容器内重现。
这种嵌套干扰很难调试，得逐层检查 display 和 direction 值，而不是只盯着图片的 float。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
