overflow:hidden触发bfc是闭合浮动的根本原因，它使父容器重新计算高度并包含浮动子元素，而非单纯“清除浮动”；但会裁剪absolute/fixed元素，display:flow-root才是现代无副作用方案。
overflow:hidden 触发 BFC 是闭合盒模型的根本原因
它不是“清除浮动”，而是让父容器重新计算高度，把浮动子元素的高度也纳入自身尺寸。关键在于触发了块级格式化上下文（BFC）——只要一个块级元素成为 BFC 容器，它就会独立参与布局计算，内部浮动元素不再脱离其包含范围。
常见错误现象：parent 高度为 0，背景色/边框消失；后续兄弟元素上移占位；图文环绕时文字不绕排或错位。
-
overflow: visible明确不触发 BFC（W3C 规范写死） -
overflow: auto和overflow: scroll同样触发 BFC，但行为隐晦、可能意外启用滚动条 - 只对
display: block、table-cell、flow-root等块级盒生效；flex或grid容器上加overflow: hidden无效 -
根元素加overflow: hidden也不会触发 BFC
为什么 overflow:hidden 会裁剪 absolute/fixed 元素
BFC 创建后，所有 position: absolute 或 position: fixed 子元素一旦超出父容器边界，就会被无声裁剪——这不是 bug，是 CSS 规范定义的行为。
典型问题场景：
- 下拉菜单、Tooltip、Modal 在父容器内突然消失
- 移动端
touchmove在该容器内失效或滚动异常 - 配合
transform: scale(0.95)时，裁剪仍按原始尺寸计算，导致误切 - 动画中父容器高度变化时，裁剪边界未同步更新，出现视觉错位
display: flow-root 才是现代推荐的无副作用方案
display: flow-root 是 CSS 专为创建无副作用 BFC 设计的值，2026 年主流浏览器已全覆盖（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+）。
它只做一件事：创建 BFC，不裁内容、不影响 position: fixed 定位、不干扰 transform 动画。
- 写法简单：
display: flow-root，无需额外overflow设置 - 语义清晰，明确表达“我要包裹浮动子元素”，而非“请把多出来的藏起来”
- 若需兼容 IE，则退回伪元素方案：
.clearfix::after { content: ""; display: table; clear: both; }
浮动本身已是过时布局模式
除非你在做图文环绕（比如新闻正文里图片左浮、文字绕排），否则根本不该用 float 布局。
display: flex 和 display: grid 天然创建 BFC，子项自动参与父容器高度计算，“清除浮动”这个概念在它们内部压根不存在。
最容易被忽略的一点：你花时间调试 overflow: hidden 的裁剪问题，其实是在维护一个本不该存在的技术路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
