overflow:hidden能“清除浮动”是因为触发bfc，使父容器包含浮动子元素高度，但本质是裁剪溢出内容，并非专为清浮动设计；现代推荐用display:flow-root替代，语义清晰且无副作用。
直接加 overflow: hidden 能让父容器“撑开”高度、包裹浮动子元素，但这不是它设计的本职工作——它只是触发了 BFC（块级格式化上下文），副作用刚好解决了高度塌陷。真要清浮动，现在有更语义清晰、副作用更少的方案。
为什么 overflow: hidden 看似能“清除浮动”
它根本没动浮动元素本身，而是让父容器创建了一个 BFC。BFC 容器会把内部浮动子元素的高度纳入自身高度计算，于是父容器不再塌陷。但注意：
-
overflow: visible（默认值）明确不触发 BFC，加了也无效 - 只对
display: block、inline-block、table-cell等块级盒生效；在flex或grid容器上加完全多余 - 必须加在发生塌陷的**直接父容器**上，加在祖先或子元素上都不起作用
- IE6/7 下可能意外触发
hasLayout，引发 margin 合并异常或双倍边距
用 overflow: hidden 时最容易踩的坑
它本质是“裁掉溢出”，不是“修复布局”，副作用在真实项目里常被低估：
- 所有
position: absolute或fixed子元素（如下拉菜单、弹层、Tooltip）一旦超出父容器边界，会被直接截断 - 移动端可能干扰
touchmove滚动行为，导致局部区域无法滑动 - 若父容器本身有
max-height或正在执行 transform 动画，overflow: hidden可能掩盖真实布局问题 - 在 Safari 中，
overflow: auto有时会强制显示滚动条，哪怕内容根本没溢出
现代项目该用什么替代 overflow: hidden
除非还要兼容 IE10 以下，否则别把它当清浮动首选。更优解是：
-
display: flow-root：专为创建无副作用 BFC 设计，不裁剪、不干扰滚动，Chrome 64+/Firefox 58+/Safari 15.4+ 已稳定支持 - ::after 伪元素方案：
.clearfix::after { content: ""; display: table; clear: both; }，兼容性好，语义明确，且不会误裁定位元素 - 直接改用
display: flex或display: grid布局：浮动本身被忽略，“清浮动”问题自然消失
哪些情况其实根本不用清浮动
很多所谓“塌陷”，其实是布局模型选错了：
- 父容器已是
flex或grid，子元素写float: left是冗余的，应直接删掉 - Bootstrap 5+ 栅格默认基于 flex，升级时顺手去掉残留的
clearfix类更干净 - 如果看到动画容器或轮播图外层加了
overflow: hidden，要确认是否真需要裁剪——有时只是历史遗留，反而限制了交互延展性
真正容易被忽略的是：靠 overflow: hidden 修好一个容器后，相邻兄弟元素突然错位，大概率是它们之间发生了 margin 相邻塌陷——那得回到 margin 使用习惯上调整，比如统一只设 margin-bottom。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
