overflow: hidden 清除浮动的本质是触发BFC使父容器包含浮动子元素，而非真正“清除”；它通过让容器重新计算高度来解决塌陷问题，但可能误裁内容，推荐伪元素clearfix或直接使用flex/grid布局。
overflow: hidden 为什么能清除浮动
它不是“清除”浮动，而是触发了 BFC（块级格式化上下文），让容器重新计算高度，把浮动子元素包进来。本质是让父容器不再“无视”浮动子元素的尺寸。
常见错误现象：div 看起来没高度、后面的内容叠在浮动元素上、背景色/边框消失。
- 只对设置了
overflow值为hidden、auto或scroll的块级容器生效（visible不行） - IE6/7 下
overflow: hidden可能意外裁剪内容，建议改用zoom: 1触发 hasLayout - 如果容器本身需要滚动，优先选
overflow: auto，避免误裁
替代方案：伪元素 clearfix 更可靠
相比 overflow，用 ::after 伪元素插入清浮动内容，不干扰溢出行为，兼容性和语义都更好。
使用场景：通用组件、需要保留 overflow: visible 的弹层容器、CSS 模块化开发。
立即学习“前端免费学习笔记（深入）”；
- 必须给父容器设置
display: block（默认就是，但 flex/grid 容器要小心） - 伪元素需设
content: ""+display: table或clear: both - IE8+ 支持
::after，老项目可用:after（单冒号）保底
简短示例：
.clearfix::after {
content: "";
display: table;
clear: both;
}
flex 或 grid 容器里根本不用清浮动
浮动在 display: flex 或 display: grid 的直接子元素上完全失效——它们不参与文档流的浮动规则，自然不存在“父容器塌陷”问题。
性能影响：避免无谓触发 BFC，尤其在动画或滚动区域，overflow: hidden 可能导致合成层激增。
- 如果子元素用了
float却在 flex 容器里，那float属性会被忽略（浏览器会打印 warning） - 想实现类似浮动的布局效果，应改用
justify-content、margin: auto或place-self - 老项目迁移时，别只扫
float，顺手检查父容器是否已变成 flex/grid
现代项目该优先用什么
新代码里，overflow 清浮动是权宜之计；真正该停用 float 布局本身。
容易被忽略的点：很多 UI 库（比如早期 Bootstrap）的栅格仍依赖 float，升级到 v5+ 后默认用 flex，但如果你手动写了 float: left 还配 overflow: hidden，其实是在叠加过时逻辑。
- 纯文字环绕图片？用
shape-outside+float是合理场景，其余尽量避开 - 构建工具中若用 PostCSS，可加
postcss-flexbugs-fixes自动处理 flex 兼容性，比硬套 overflow 更干净 - 审查元素时看到父容器高度为 0，先看 computed 样式里的
display和float，别急着加overflow
