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 临时“修复”的地方，往往藏着被裁剪的弹层或动画，只是还没被发现。
