css float 元素高度塌陷怎么办_clearfix 或 overflow hidden

Float元素导致父容器高度塌陷是因为其脱离文档流，使父容器无法感知浮动子元素高度；clearfix通过::after伪元素触发BFC并clear:both来修复；overflow:hidden通过创建BFC撑开高度但会裁剪溢出内容；现代推荐使用display:flow-root。

为什么 float 元素会导致父容器高度塌陷

因为 float 会让元素脱离普通文档流，父容器在计算高度时“看不见”这些浮动子元素，于是高度收缩为 0（或仅剩非浮动内容撑起的高度）。这不是 bug，是 css 规范定义的行为。

clearfix 的原理和正确写法

clearfix 是通过在父容器的伪元素上触发 BFC 并清除浮动，来让父容器重新包裹浮动子元素。关键点在于：必须用 ::after（不是 ::before），且必须包含 content 和 clear: both。

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

• content: "" 不可省略——没有它，伪元素不渲染，clear 失效
• display: table 比 block 更安全，避免 IE6/7 下 margin 双倍问题（如需兼容老版本，可用 display: block; height: 0; visibility: hidden;）
• 只给需要包裹浮动子元素的父容器加这个 class，不要全局滥用

overflow: hidden 为什么能“修复”塌陷

overflow: hidden（或 auto、scroll）会强制父容器创建新的 BFC，而 BFC 区域会包含内部的浮动元素，因此高度自然被撑开。

• 简单直接，适合快速验证或布局简单场景
• 副作用明显：溢出内容会被裁剪（比如下拉菜单、阴影、绝对定位元素超出边界时消失）
• 在 flex 或 grid 容器中设置 overflow 不一定触发相同行为，BFC 触发条件有差异
• 某些安卓 webview 或旧版 safari 中，overflow: hidden 可能引发滚动卡顿或输入框失焦

现代更推荐的替代方案

如果目标浏览器支持（chrome 49+、firefox 28+、Safari 10.1+、edge 16+），优先用 display: flow-root：

立即学习“前端免费学习笔记（深入）”；

.container {   display: flow-root; }

它专为解决此问题设计：创建一个无副作用的 BFC，不影响溢出、不干扰定位上下文、不改变盒模型表现。比 clearfix 少写几行，比 overflow: hidden 更干净。

真正容易被忽略的是：很多项目还在用老旧的 clearfix mixin 或全局重置，却没评估是否已可切换到 flow-root；而线上用 overflow: hidden 临时“修复”的地方，往往藏着被裁剪的弹层或动画，只是还没被发现。