父容器高度塌陷是浮动的必然结果，因浮动元素脱离文档流致父容器无法感知其高度；clearfix通过伪元素触发bfc并清除浮动来修复，而overflow:hidden仅因触发bfc“碰巧有效”但有副作用。
为什么父容器高度塌陷是浮动的必然结果
浮动元素会脱离普通文档流，父容器在计算高度时直接“看不见”它们。这不是 bug，而是 CSS 浮动的原始设计逻辑 —— 它本就用于文字环绕图片这类场景，不是为布局而生。所以父容器高度塌陷不是出错了，而是按规范走到了终点。
常见现象：div 包着几个 float: left 的子 div，但父 div 在开发者工具里显示高度为 0，背景色/边框消失，后续兄弟元素直接往上贴。
clearfix 是怎么让父容器“感知”到浮动子元素的
clearfix 本质是在父容器末尾插入一个**视觉上不可见但具有清除行为的伪元素**，强制父容器延伸到所有浮动子元素的底部。
最常用的是 micro clearfix（兼容 IE8+）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
-
content: ""是必须的，否则伪元素不渲染 -
display: table触发 BFC（块级格式化上下文），同时避免display: block可能带来的默认 margin 问题 -
clear: both确保该伪元素下移至所有浮动元素下方，从而撑开父容器高度 - 不要只写
::after，IE8 需要:after（单冒号），但现代项目通常加双冒号即可，或用 Autoprefixer 自动处理
overflow: hidden 为什么也能“修复”塌陷
它并非真正“清除浮动”，而是通过触发父容器的 BFC，使容器重新建立独立的布局上下文 —— BFC 容器会包含内部浮动元素的边界，因此自动扩展高度。
但副作用明显：
立即学习“前端免费学习笔记（深入）”；
