float 脱离文档流导致父元素高度塌陷是设计本意而非 bug；overflow: hidden 可触发 bfc 快速修复但会裁剪溢出内容；clearfix::after 是兼顾兼容与语义的推荐方案。
float 脱离文档流是塌陷的根本原因
父元素高度变成 0 不是 bug，而是 float 的设计本意：它让元素脱离标准文档流，不再参与父容器的高度计算。浏览器渲染时，父容器“看不见”浮动子元素，背景、边框、margin-bottom 全部失效，后续兄弟元素还会往上叠。
常见现象包括：div 包着两个 float: left 的子项，开发者工具里父容器高度显示为 0；设置了 background-color 却不显示；页脚直接卡进浮动区域里。
overflow: hidden 触发 BFC 最快但有隐藏风险
给父容器加 overflow: hidden（或 overflow: auto）能立刻生效，原理是强制创建 BFC，使父容器重新包含浮动子元素。
- ✅ IE7+ 全兼容，写一行就解决
- ⚠️ 会裁剪所有溢出内容：比如
position: absolute的下拉菜单、box-shadow、tooltip 或动画位移超出的部分 - ❌
overflow: visible不触发 BFC，完全无效 - ❌
overflow: scroll强制显示滚动条，干扰 UI
.clearfix::after 是兼顾兼容与语义的推荐方案
用伪元素在父容器末尾插入一个不可见但参与布局的节点，再清除浮动，不污染 HTML 结构。
必须写全这三部分：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6–7 兼容，政务/银行内网项目别漏 */
}
-
content: ""缺失 → 伪元素不渲染 → 清除失效 -
display: table比block更稳妥：避免外边距合并，且天然触发 BFC 边界 - 现代项目中，若父容器已设
display: flex或display: grid，加.clearfix完全无效——flex/grid 本身不塌陷
真正容易被忽略的点：清除浮动不是终点
加了 clear: both 或 overflow: hidden 后高度“恢复”，不代表布局就稳了。常被忽视的是：margin-collapse（父子/兄弟间外边距折叠）、min-height 冲突、或者父容器本身用了 vertical-align 导致基线错位。这些会让视觉高度看似正常，但和相邻元素间距异常，调试时得回头检查整个上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
