overflow: hidden 并非真正清除浮动，而是通过触发 BFC 使父容器包含浮动子元素；::after 伪元素（content+display:table+clear:both）更语义化稳妥；display:flow-root 是现代最优解但兼容性受限。
直接加 overflow: hidden 是最快速生效的解法，但它不是“清除浮动”，而是触发 BFC 让父容器重新包裹子元素；真要兼顾语义、兼容和溢出控制，::after 伪元素方案更稳妥。
为什么 overflow: hidden 能“撑开”父容器
它不操作浮动本身，而是让父容器创建一个新的块级格式化上下文（BFC），BFC 容器会把内部浮动元素纳入高度计算——所以父容器突然“看见”了子元素，高度就正常了。
- 仅对
display为 block、inline-block 等块级盒生效；overflow: visible不触发 BFC - IE6/7 下可能意外裁剪内容，老项目建议搭配
zoom: 1 -
overflow: auto在 Safari 中有时会强制显示滚动条，哪怕内容没溢出 - 如果父容器本就需要横向滚动（比如轮播图容器），别用
hidden，否则内容被截断
::after 伪元素清除浮动怎么写才有效
核心是生成一个块级、可清除浮动、且不影响布局的“隐形清道夫”。光写 clear: both 不够，必须让它真正渲染出来。
- 必须有
content: ""，空字符串也行，但不能省略 - 推荐用
display: table，比block更稳：它自动触发 BFC，且不会因字体大小产生基线间隙 - 不要用
height: 0; overflow: hidden组合，会裁剪子元素的box-shadow和transform溢出部分 - 现代项目用双冒号
::after；若需支持 IE8，可用单冒号:after保底
display: flow-root 值得直接用吗
它是专为此类问题设计的现代属性，语义清晰、无副作用，但浏览器兼容性有硬伤。
立即学习“前端免费学习笔记（深入）”；
- Chrome 64+、Firefox 62+、Safari 15.4+ 支持；Edge 79+ 支持；IE 完全不支持
- 它创建 BFC 的同时，不改变溢出行为（不像
overflow: hidden那样可能误裁内容） - 如果项目已放弃 IE 和旧版 Safari，可放心用：
.container { display: flow-root; } - 注意：它会让父容器变成新的格式化上下文根，可能影响
position: absolute子元素的定位参考系
哪些情况其实根本不用清浮动
很多“塌陷”问题，根源不是浮动没清，而是布局模型选错了。
- 父容器设了
display: flex或display: grid后，子元素的float属性会被忽略，自然不存在塌陷 - 如果看到 flex 容器里还在写
float: left+overflow: hidden，说明逻辑冗余，该删掉 float - Bootstrap 5+ 默认栅格已是 flex，老项目升级时，顺手去掉那些残留的
clearfix类更干净 - 动画或滚动区域慎用
overflow: hidden，它可能触发额外合成层，拖慢性能
真正容易被忽略的点是：overflow: hidden 看似万能，但它解决的是“高度塌陷”表象，不是浮动滥用这个病根；一旦父容器里有 position: absolute 或 transform 元素，即使清了浮动，圆角、阴影、下拉菜单仍可能破框而出。
