overflow:auto能清除浮动是因为触发BFC使父容器包含浮动元素高度；display:flow-root是更优解，专为创建BFC设计，无滚动条或裁剪副作用。
哪些CSS属性能触发BFC
只要一个元素满足以下任一条件，浏览器就会为它创建新的块级格式化上下文（BFC）。这不是“开启开关”，而是渲染引擎根据规则自动判定的结果。关键在于：display、float、position、overflow、contain 这几类属性值的组合。
-
overflow不是visible（如hidden、auto、scroll）——最常用也最安全 -
display为flow-root——专为此设计，语义清晰，无副作用 -
float不是none（如left、right）——但会让元素脱离文档流，慎用 -
position为absolute或fixed——同样脱离文档流，且不参与父容器高度计算 -
display为inline-block、table-cell、table-caption、flex、grid等 ——部分会改变盒模型行为，需留意布局影响 -
contain为layout、content或strict——现代性能优化手段，附带 BFC 效果
为什么 overflow: hidden 能清除浮动但 overflow: auto 有时不行
表面上看，overflow: hidden 和 overflow: auto 都是非 visible 值，都能触发 BFC。但实际效果差异常源于滚动机制和父容器尺寸约束：
-
overflow: hidden强制裁剪内容，不产生滚动条，布局稳定，推荐用于清除浮动 -
overflow: auto只在内容溢出时才显示滚动条，某些浏览器（尤其旧版 Safari）可能因尺寸计算延迟导致 BFC 创建不稳定 - 如果父容器宽度未显式设定（比如靠内容撑开），
auto可能无法触发预期的 BFC 行为 - 更稳妥的做法是搭配
min-width: 0或明确宽度，或直接改用overflow: hidden
display: flow-root 是什么，比 overflow 更好吗
display: flow-root 是 CSS Display Module Level 3 中引入的专门用于创建 BFC 的值。它不改变盒模型类型（仍是块级），也不影响溢出行为或尺寸计算，纯功能导向。
- 不会像
overflow: hidden那样意外裁剪内容 - 不会像
float或absolute那样让元素脱离文档流 - 兼容性已覆盖所有现代浏览器（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+）
- 写法简洁：
.container { display: flow-root; }，语义即目的 - 若需支持 IE 或极老 Android WebView，仍需回退到
overflow: hidden
BFC 创建后，为什么兄弟元素还是被浮动覆盖了
常见误区：以为给父容器加 BFC 就能解决所有浮动干扰问题。实际上，BFC 的隔离作用只发生在「创建它的那个元素内部」。如果被覆盖的是父容器的**兄弟元素**（而非子元素），那它根本不在这个 BFC 里，自然不受保护。
立即学习“前端免费学习笔记（深入）”；
- 例如：
.parent触发 BFC 包含了浮动子项，但.sibling在 DOM 中与.parent同级，它仍处于根 BFC（）中 - 要让
.sibling不被浮动影响，得让它自己也触发 BFC（比如加overflow: hidden或display: flow-root） - 浮动影响范围仅限于同一 BFC 内；清除浮动（
clear）也只能清除同 BFC 中前置浮动元素的影响 - 外边距折叠（margin collapse）同理：只有同属一个 BFC 的相邻块级元素才会折叠
BFC 不是全局开关，它是按元素粒度逐个创建的局部渲染边界。最容易被忽略的点是：你总在修复“父容器塌陷”，却忘了真正被干扰的可能是隔壁兄弟元素——它需要自己的 BFC，而不是你父容器的。
