父容器高度塌陷是浮动的必然结果，因浮动元素脱离文档流致父容器无法感知其高度；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 容器会包含内部浮动元素的边界，因此自动扩展高度。
但副作用明显：
立即学习“前端免费学习笔记（深入）”；
- 内容溢出会被裁剪（比如子元素用了
position: absolute或负margin超出父容器范围） - 配合
transform或scrollbar-gutter时可能引发渲染异常 - 在 flex 或 grid 容器中设置
overflow: hidden不会触发 BFC（注意：这是 CSS Display Module Level 3 的变更，Chrome 105+、Firefox 110+ 已生效）
所以它只是“碰巧有效”，不是语义正确的解法。
现代开发中更推荐什么方案 浮动本身已不是布局首选。如果你仍在用浮动做多栏布局，优先考虑升级：
✅ 替代方案：
- 用
display: flex，父容器加display: flex，子项自动排列且父容器高度正常 - 用
display: grid，例如grid-template-columns: repeat(3, 1fr) - 纯文本环绕图片？用
float+shape-outside，无需清浮动
⚠️ 如果必须兼容老代码或遗留系统，clearfix 比 overflow: hidden 更可控、副作用更小；但要注意：给 clearfix 类加 zoom: 1（IE6/7）已无必要，除非你还支持那个年代的浏览器。
真正容易被忽略的是：当父容器本身是 position: absolute 或 display: inline-block 时，clearfix 依然有效，但 overflow: hidden 可能因定位上下文变化而失效 —— 这类边界情况，得靠实际 DOM 结构验证，不能只记结论。
