为什么浮动元素会让父容器高度塌陷
浮动元素脱离文档流，父容器无法感知其尺寸，导致高度变成0。常见现象是：div 里放了几个 float: left 的 img 或 li，结果父 div 在页面上“看不见”——背景色不显示、边框不包裹内容。
clearfix 类怎么写才真正生效
现代浏览器推荐用 ::after 伪元素触发 BFC，不是随便加个 clear: both 就行。关键点：
-
display: table或display: block必须有，否则伪元素不占空间 -
content: ""缺失会导致整个 clearfix 失效（这是最常漏的） - 必须加
clear: both，仅靠overflow: hidden有兼容隐患（比如 iOS Safari 对zoom的处理）
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
直接用 overflow: hidden 行不行
能临时“撑开”父容器，但属于副作用利用，容易踩坑：
立即学习“前端免费学习笔记（深入）”；
- 会裁剪
position: absolute子元素超出父容器的部分（比如下拉菜单、tooltip） - 在 Flex/Grid 容器中可能干扰对齐行为
- IE6/7 不支持
overflow: hidden触发 BFC，得 fallback 到zoom: 1
所以它不是清除浮动的方案，只是视觉上“看起来像清了”。
什么时候不该用 clearfix
现代布局中很多场景根本不需要它：
- 父容器已是
display: flex或display: grid—— 浮动本身就被忽略 - 只有一两个浮动元素且高度固定，用
margin-bottom手动预留空间更轻量 - 使用
float是为了文字环绕（如图文混排），那父容器本就不该“包裹”浮动元素
强行给每个容器加 class="clearfix" 是过时习惯，反而增加维护成本和 DOM 噪声。
