float后文本绕图是因浮动脱离文档流但行框仍留空间，属设计行为；解决需触发BFC（如overflow:hidden或display:flow-root）或clear:both清浮动。
为什么 float 后的文本总往图片旁边挤
因为浮动元素会脱离文档流，后续块级元素的行框（line boxes）仍会为它留出空间，导致文字环绕。这不是 bug，是 float 的原始设计行为——但现代布局中它常被误用作“侧边栏+主内容”排版，结果文字穿插进浮动区，看着像错位。
真正要的不是“阻止环绕”，而是让文本容器「无视浮动影响」，自己独占一行、自成一块。关键在触发 BFC（Block Formatting Context）或强制清浮动。
overflow: hidden 触发 BFC 最快但有副作用
给文本容器（比如 <div class="content">）加 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 容器子项也无效（它们已脱离常规流） - ⚠️ 坑点：如果浮动元素后面跟的是
<p>，但中间插了注释、空格文本节点，可能被解析为匿名块，导致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 场景里，容易被条件样式覆盖掉。
