overflow: hidden 是最常见解法，它能立即触发 BFC，让容器收缩包裹内部、同时不与浮动重叠。- ✅ 有效：浏览器兼容性好，IE6+ 都支持
- ⚠️ 风险：如果容器内真有溢出内容（比如长单词、绝对定位元素越界），会被裁剪，且
overflow: auto可能意外出现滚动条 - ⚠️ 注意：
overflow: visible不触发 BFC；overflow: clip（较新）可替代但 IE/旧 Edge 不支持
/* 示例：安全写法，只针对需要隔离的容器 */
.content {
overflow: hidden; /* 或 overflow: clip */
}clear: both 清浮动更直白但位置敏感
clear 不是作用于浮动元素本身，而是作用于「后续兄弟块级元素」，让它下移避开浮动区域。所以必须确保它是浮动元素的下一个同级块元素，且是块级（display: block 或 table 等）。
- ✅ 直观：语义清晰，“我不要挨着上面的浮动”
- ⚠️ 坑点：
clear对 inline 元素无效；对 flex / grid 容器子项也无效（它们已脱离常规流） - ⚠️ 坑点：如果浮动元素后面跟的是
，但中间插了注释、空格文本节点，可能被解析为匿名块，导致clear失效
<img src="a.jpg" style="float: left"> <div style="clear: both">这段文字不会环绕图片</div>
现代方案：优先用 display: flow-root
display: flow-root 是专为触发 BFC 设计的值，语义明确、无副作用——它既创建新格式化上下文，又不改变溢出行为，也不影响子元素定位。
- ✅ 推荐：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 支持；基本覆盖所有现代项目目标环境
- ⚠️ 兼容注意：IE 完全不支持，如需兼容 IE，得回退到
overflow: hidden或伪元素清浮动 - ⚠️ 别写成
display: inline-flow-root—— 不存在这个值，只有flow-root
.content {
display: flow-root; /* 干净、精准、无副作用 */
}BFC 触发点很多，但选哪个取决于你是否容忍副作用、是否要兼容老浏览器。最容易被忽略的是：clear 必须作用在浮动的「下一个块级兄弟元素」上，而不是父容器；而 flow-root 虽好，但在 CSS-in-JS 或动态 class 场景里，容易被条件样式覆盖掉。
今天关于《CSS阻止文本环绕浮动图片的方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！
