触发bfc才是解决右侧内容被遮挡的根本方法，因其让容器感知浮动并重新布局；margin-left仅适用于固定宽度的简单场景，且无法解决父容器塌陷等问题。
右侧内容被遮挡，不是因为没留空间，而是它还在“正常流”里，没意识到左边有个浮动元素占了位置。 直接加 margin-left 是临时补救，治标；触发 BFC 才是让右侧容器自己“感知”到浮动并重新布局的可靠方式。
为什么 margin-left 有时不管用
给右侧元素加 margin-left 看似直观，但问题在于：这个值必须精确等于左侧浮动元素的宽度（含 padding/border），一旦浮动元素宽度动态变化（比如响应式、字体缩放、内容增减），margin-left 就会错位。更麻烦的是，如果右侧元素本身有 float: right 或 position: absolute，margin-left 完全不生效。
- 只适用于左侧浮动宽度固定、右侧元素是普通块级流内元素的简单场景
- 无法解决父容器塌陷问题——父容器高度仍为 0，背景、边框、阴影都会异常
- 和
clear混用时容易冲突，比如clear: both会让元素下移，再加margin-left反而多出空白
用 overflow 触发 BFC 是更稳的选择
overflow: hidden 或 overflow: auto 作用在**包含浮动子元素的父容器**上，会强制它建立 BFC，从而正确包裹浮动元素、恢复自身高度，并让后续兄弟元素自然从它下方开始排列——这才是遮挡问题的根源所在。
- 必须加在浮动元素的**直接父容器**上，不是加在被遮挡的右侧元素自己身上
-
overflow: hidden要小心裁剪：如果父容器内有position: absolute的 tooltip、下拉菜单，可能被截断 -
overflow: auto更安全，只在必要时出现滚动条，但某些旧版 Android WebView 对它的渲染不一致 - IE6/7 需要配合
zoom: 1触发 hasLayout，等效于 BFC
现代项目请直接换掉 float
浮动本就不是为页面主布局设计的，它只是早期为图文环绕妥协的方案。现在 display: flex 和 display: grid 能天然规避所有浮动相关问题。
- 把原来写
float: left的导航栏、侧边栏、卡片列表，直接改成display: flex父容器 +flex: 0 0 auto子项，不用清浮动、不用 BFC、不用margin手动对齐 - 注意：如果用了第三方 UI 库（比如 Bootstrap 4 及更早），它的栅格类（
.col-md-6）底层仍依赖float，升级到 v5+ 后默认用 flex，但你手写的float规则不会自动消失 - PostCSS 插件如
postcss-flexbugs-fixes可自动处理 flex 兼容性，比硬套overflow更干净
真正容易被忽略的是：很多所谓“清除浮动”的调试，其实是在掩盖一个更根本的问题——那个父容器本就不该靠浮动来布局。BFC 是补丁，flex/grid 才是答案。但如果你正在维护一个 IE9+ 的老系统，overflow: hidden 加 zoom: 1 仍是最快能上线的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
