float多列会导致父容器高度塌陷，因其子元素脱离文档流；clearfix通过伪元素触发BFC并清除浮动来修复，flex则因子项不脱离文档流而天然避免塌陷。
为什么 float 多列会高度塌陷
当子元素用 float: left 或 float: right 排成多列时，父容器默认不包裹浮动子项——它的高度会坍缩为 0，导致后续元素上移、背景色/边框消失、margin 失效。这不是 bug，是 float 的原始设计行为：浮动元素脱离文档流，父容器“看不见”它们。
常见现象：div.container 设了 background-color 却看不到；底部 footer 跑到内容左侧；清除浮动前加的 clear: both 无效。
clearfix 的写法和关键细节
clearfix 是通过在父容器伪元素上触发 BFC 并清除浮动来修复塌陷。最简可用版本（兼容 IE8+）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
必须注意的三点：
立即学习“前端免费学习笔记（深入）”；
-
content不能为空字符串以外的值（如" "或"."都行，但不能省略） - 不能只写
clear: both，必须配合display: table（或block+height: 0）让伪元素参与布局 - 父容器不能设
overflow: hidden同时又依赖子元素溢出（比如下拉菜单、tooltip），否则会被裁剪
flex 容器为什么能天然避免塌陷
给父容器设 display: flex 后，子元素自动成为 flex item，不再脱离文档流，父容器自然撑开。它不是“清除”浮动，而是绕过了浮动机制本身。
使用时需注意：
- 无需额外写
clear或伪元素，但要明确主轴方向：flex-direction: row（默认）才等效多列布局 - 如果子元素有
float，它会被忽略——flex item 不响应float属性 - IE10+ 支持良好，但 IE10/11 对
flex-wrap和某些对齐属性有 bug，慎用align-content
该选 clearfix 还是 flex
取决于你是否还在用 float 布局。如果只是老项目修一个塌陷问题，且不能动结构，clearfix 最轻量；如果正写新页面或重构，直接用 display: flex 更可靠、语义清晰、扩展性强。
容易被忽略的一点：有些框架（如 Bootstrap 4+）的栅格系统底层已是 flex，此时再手动加 clearfix 可能引发意外交互，比如 col 内部又 float 子项，反而破坏 flex 行为。
