overflow:hidden并不真正清除浮动，它仅通过触发bfc使父容器包含浮动子元素高度，但会裁剪溢出内容；现代应优先使用display:flow-root。
overflow: hidden 并不真正清除浮动
它只是触发了父容器的 BFC（块级格式化上下文），让父容器重新把浮动子元素纳入高度计算——所以“撑高”了，看起来像清除了。但浮动本身仍在文档流外，float 属性没被重置，也没被移除。
常见误判现象：parent 高度为 0、背景色消失、后续兄弟元素上移，加了 overflow: hidden 后恢复正常，就以为“清掉了”。其实只是 BFC 让父容器“看见”了浮动子元素的高度。
关键限制：只对 display: block、inline-block、table-cell 等传统块盒生效；display: flex 或 grid 容器上加它完全无效。
为什么加了 overflow: hidden 却没撑开父容器
不是写错了，而是被其他样式覆盖或干扰：
-
display: flex或display: grid的父容器上设overflow: hidden—— 这两种 display 值会禁用 BFC 触发能力 - 父元素有
transform、filter、will-change，创建了新层叠上下文，BFC 不生效 - CSS 优先级问题：
overflow: visible或auto被更高权重要求覆盖，实际 computed 值不是hidden - 父元素设置了
height或max-height，强行压住了 BFC 的高度伸展效果
最常被漏查的一点：transform: translateZ(0) 就足以让 overflow: hidden 失效，尤其在 Safari 中。
display: flow-root 是现代替代方案
它是 CSS 专为创建无副作用 BFC 设计的值，2026 年主流浏览器已全覆盖（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+）：
- 写法极简：
.container { display: flow-root; } - 语义清晰：明确表达“我要包裹浮动子元素”，而非“请把多出来的藏起来”
- 不裁剪内容：
position: absolute弹层、box-shadow、transform溢出部分全部正常渲染 - 不干扰定位参考系：不会让父容器变成绝对定位子元素的包含块
若需兼容 IE，则退回伪元素方案：.clearfix::after { content: ""; display: table; clear: both; }。
真正容易被忽略的副作用
overflow: hidden 本质是裁剪，不是清理。只要子元素视觉区域超出父容器边界，就会被静默截断：
-
position: absolute下拉菜单、Tooltip、Modal 一旦超出父容器底边，直接消失（不是 bug，是规范行为） -
box-shadow向外延伸的部分、::before/::after偏移几个像素的内容，全被切掉 - 移动端
touchmove在该容器内可能卡顿或失效 - 配合
transform: scale()或 viewport 缩放时，裁剪边界按原始尺寸计算，导致误切
你花时间调试“为什么菜单不见了”，往往就卡在那一行 overflow: hidden 上——而它本就不该出现在需要弹层或动画的容器里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
