css清除浮动中的overflow:hidden与clearfix对比

应优先使用 display: flow-root 清除浮动，它无副作用且等效于 BFC；兼容 IE 时用 clearfix 伪元素方案；overflow:hidden 仅限调试，会裁剪溢出内容。

overflow:hidden 清除浮动的原理和限制

它不是真正“清除”浮动，而是触发父容器的 BFC（块级格式化上下文），让父容器重新计算高度，包含内部浮动元素。但副作用明显：overflow:hidden 会裁剪溢出内容、隐藏下拉菜单、遮挡阴影或定位元素。

• 当子元素使用 position: absolute 或 transform 向外偏移时，可能被意外截断
• 不适用于需要滚动、悬停展开、或动画溢出的场景
• 在 Flex/Grid 容器中设置 overflow:hidden 不会触发 BFC，失效
• 某些旧版 Safari 对 overflow:hidden + zoom:1 组合有渲染 bug

clearfix 的标准实现与现代写法

通过伪元素插入并清除浮动，不干扰布局流，也不影响溢出行为。最常用的是 micro clearfix：

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

现代更推荐用 ::after 单伪元素 + display: block，避免 table 布局语义干扰：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

• 必须给父容器添加 class="clearfix"，不能靠继承自动生效
• 如果父容器本身是 display: flex 或 display: grid，clear 无效，此时无需 clearfix
• 不要对已用 display: flow-root 的容器重复加 clearfix，冗余且可能干扰

flow-root 是更干净的替代方案

display: flow-root 是 CSS 标准中专为创建无副作用 BFC 而设的值，效果等同于 clearfix，但无需额外 class 或伪元素：

.container {
  display: flow-root;
}

• 完全替代 overflow:hidden 和 clearfix 在清浮动场景中的角色
• 兼容性已很好：Chrome 58+、Firefox 53+、Safari 10.1+、Edge 16+
• 不会隐藏溢出，不干扰 position: absolute 子元素定位
• 注意：IE 完全不支持，如需兼容 IE，仍得回退到 clearfix

什么时候该选哪一种？

优先级很明确：能用 flow-root 就不用其他；要兼容 IE 才考虑 clearfix；仅临时调试或确定无溢出风险时才用 overflow:hidden。

• 新项目、管理后台、移动端页面 → 直接上 display: flow-root
• 老项目需支持 IE11 → 用 micro

  

  clearfix，并统一封装成 SCSS mixin 或 utility class
• 写 demo 快速验证浮动是否被包住 → overflow:hidden 可以，但别提交到生产代码
• 父容器已有 overflow:auto 且恰好需要滚动 → 别再叠加 clearfix，它没意义

最容易被忽略的一点：很多开发者以为加了 clear:both 就万事大吉，其实它只对紧跟其前的浮动兄弟元素生效，对父容器高度塌陷毫无作用——清浮动的本质从来不是“清”，而是“建立新的包含上下文”。