浮动使元素脱离文档流导致父容器高度塌陷是CSS固有行为，非bug；解决关键是让父容器重新包含浮动子元素，标准clearfix需双伪元素：::before防外边距合并，::after设content+display+clear:both清除浮动。
为什么 div 浮动后父容器高度塌陷
浮动元素会脱离文档流，父 div 无法感知其高度，导致高度变成 0——这不是 bug，是 CSS 浮动的固有行为。常见现象：父容器背景色/边框消失、后续元素上移、布局错乱。
解决核心就一条：让父容器「重新包含」浮动子元素。不是给子元素加 clear: both（那只能影响后续兄弟元素），而是让父容器自己“清”掉内部浮动的影响。
clearfix 的标准写法及为什么必须用 ::before 和 ::after
现代通用 clearfix 是通过伪元素触发 BFC 并清除浮动，不是靠空标签或 overflow: hidden 这类副作用方案。
-
::before用于防止顶部外边距合并（避免父容器和第一个子元素的margin-top合并） -
::after才是真正清除浮动的关键：设content: ""+display: table（或block）+clear: both - 必须设
display: block或table，否则伪元素不参与布局，clear无效 - 不能只用
::after，否则某些场景下顶部 margin 会意外塌陷
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
为什么 overflow: hidden 不是万能解法
它确实能让父容器包裹浮动子元素，但副作用太强，容易掩盖真实问题：
立即学习“前端免费学习笔记（深入）”；
- 内容溢出时会被直接裁剪（比如下拉菜单、tooltip、负 margin 布局）
- 配合
transform或position: fixed元素时，可能触发非预期的层叠上下文或滚动截断 - 在 flex / grid 容器中加
overflow: hidden可能干扰主轴对齐行为 - 无法解决 margin 合并问题，父容器仍可能和子元素粘连
现代项目里要不要手写 clearfix 类
多数情况不用——除非你还在维护 IE9+ 旧项目。原因很实际：
- CSS Grid 和 Flexbox 布局天然不依赖浮动，
display: flex或display: grid的父容器自动包含子项，无需清浮 - 如果必须用浮动（比如文字环绕图片），现代写法倾向用
float: left+overflow: auto（比hidden更安全）或直接换shape-outside - Bootstrap 5+、Tailwind 等已移除
clearfix工具类，说明它正在退出主流布局手段
真要兼容老浏览器且必须用浮动，就复制上面那个双伪元素版本；别用单 ::after、别用 zoom: 1（IE hack）、也别信网上那些漏掉 ::before 的“精简版”——塌陷和 margin 合并会在某个凌晨三点准时找上你。
