overflow: hidden 能“清除”浮动是因为它触发BFC，使父容器包含浮动元素并撑开高度，但不改变浮动行为；缺点是裁剪溢出内容，推荐用display: flow-root替代，语义清晰无副作用。
为什么 overflow: hidden 能清除浮动？
因为 overflow 值不是 visible 时（如 hidden、auto、scroll），该块级元素会创建一个新的 BFC。BFC 的核心规则之一是：「计算高度时，浮动元素也参与计算」——这意味着父容器不再忽略子浮动元素的几何尺寸，自然就撑开了高度。
常见错误现象：parent 高度为 0，背景色/边框不显示，后续兄弟元素上移；但加了 overflow: hidden 后突然“有高度”了。
- ⚠️ 注意：它只是让父容器包含浮动子项，并不改变子项本身的浮动行为
- ⚠️
overflow: hidden会裁剪溢出内容，比如带阴影、下拉菜单、tooltip 的子元素可能被意外截断 - 更现代的替代方案是
display: flow-root，它创建 BFC 且无裁剪副作用
display: flow-root 是什么？为什么推荐它？
display: flow-root 是专为创建无副作用 BFC 而设计的值，2018 年起已进入主流浏览器支持（Chrome 64+、Firefox 59+、Safari 15.4+）。它和 overflow: hidden 效果一致（能包含浮动、防止 margin 塌陷），但不会隐藏溢出内容。
使用场景：需要清除浮动，又不能接受裁剪、也不愿用 flex 或 grid 改变原有布局流时。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
flow-root不影响子元素的float行为，也不干扰position: static的默认定位 - 对比
display: flex：后者会让子浮动元素失效（float在 flex 容器中被忽略），而flow-root完全保留原有渲染逻辑 - 兼容性注意：IE 完全不支持，若需兼容 IE，仍得回退到
overflow: hidden或伪元素 clearfix
BFC 内部还会发生 margin 塌陷吗？
会，而且只发生在「属于同一个 BFC」的两个相邻块级盒子之间。这是 BFC 的固有规则，不是 bug。
典型例子：父子元素间上下 margin 合并 —— 父元素没边框/内边距/padding，子元素设了 margin-top，结果父元素顶部外边距直接“变成”子元素的值。
- 解决方式：给父元素触发 BFC（如
overflow: hidden）或加border/padding，就能隔离内外 margin 计算 - 注意：BFC 只阻止「跨 BFC 边界」的干扰，不消除「BFC 内部」的 margin 合并逻辑
- 兄弟元素间的 margin 塌陷同样适用此规则：只要它们同属一个 BFC，垂直相邻就会合并
float 和 position: absolute 也能触发 BFC，为什么少用？
能，但副作用太强，工程中基本回避。
float: left 或 position: absolute 确实满足 BFC 触发条件，但它们同时让元素脱离文档流 —— 这会导致父容器无法感知其存在，且影响后续兄弟元素布局。
-
float：父容器仍可能塌陷（除非自身也 BFC 化），且后续普通流元素会环绕它 -
position: absolute：完全脱离文档流，父容器高度归零，兄弟元素上移，布局失控风险极高 - 真正需要 BFC 时，优先选
overflow、display: flow-root、display: flex（仅对直系子项生效）这类「不破坏流式布局」的方式
