优先用display: flow-root，次选clearfix::after，慎用overflow: hidden——因后者会裁剪溢出内容、干扰fixed定位、破坏z-index且在Flex/Grid中失效；flow-root语义清晰无副作用，但IE不支持。
直接给父容器加 overflow: hidden 或 display: flow-root 是最有效的解法，但选哪个取决于你是否允许裁剪、是否需要兼容旧浏览器。
为什么 overflow: hidden 能“解决”溢出但又容易出问题
它不是在“清除浮动”，而是触发 BFC（块级格式化上下文），让父容器重新包含浮动子元素并裁剪超出边界的视觉内容。但副作用很实在：
-
overflow: hidden会裁掉position: absolute的 tooltip、下拉菜单、负 margin 拉伸的装饰元素——只要这些元素的定位上下文不是当前父容器，就逃不出裁剪 - 如果父容器本身有横向滚动需求（比如长表格），
overflow: hidden会直接封死滚动能力 - 在 iOS Safari 中，
overflow: auto可能导致 touch 事件响应卡顿或滚动条意外出现 - 父容器宽度必须是明确值（如
width: 100%、max-width: 600px），否则“溢出”无从定义，hidden就不生效
display: flow-root 是更干净的替代方案吗
是的，它是专为解决这个问题设计的：创建 BFC，包裹浮动子元素，且不附带裁剪、滚动条或盒模型副作用。但兼容性有硬门槛：
- IE 完全不支持；Safari 15.4+ 才稳定，Safari 14 及更早版本存在
min-height解析异常 - Chrome 64+、Firefox 59+、Edge 79+ 支持良好
- 写法极简：
.container { display: flow-root; }，无需伪元素、无需担心clear顺序 - 注意：它和
display: block一样参与 margin 合并，但内部浮动不会再“逃逸”出容器边界
clearfix 伪元素方案还在什么场景必须用
当项目仍需支持 IE11 或 Safari ≤14 时，.clearfix::after 是唯一兼顾语义与兼容的选择。但细节极易出错：
立即学习“前端免费学习笔记（深入）”；
- 必须同时声明
::before和::after，只用::after在旧版 Safari 下可能漏清除 -
display: table比display: block更稳，能避免 IE6/7 的双倍 margin bug - 必须加
height: 0和font-size: 0，否则伪元素可能撑开额外空白行 - 这个类要加在浮动子元素的**直接父容器**上，不是加在子元素自己身上
- 如果父容器已经是
display: flex或display: grid，float已被忽略，加.clearfix完全无效
真正容易被忽略的不是“怎么选方案”，而是浮动元素是否还在父容器的渲染边界内——比如用了 margin-left: -20px 或 transform: translateX(-10px)，视觉上“跑出”了，但父容器依然不会塌陷或裁剪。这不是清除失效，是布局意图本身需要被重新审视。
