float导致父容器高度塌陷是因为浮动元素脱离文档流，不参与高度计算；clearfix通过::after伪元素插入display:table的占位节点并clear:both，使父容器重新感知子元素边界。
为什么float会让父容器高度塌陷
浮动元素会脱离文档流，父容器如果没设置高度，就“看不见”子元素，自然不撑开。这不是bug，是CSS规范行为——但实际布局中常导致后续内容上移、背景色消失、边框错位等问题。
常见错误现象：div设置了background-color或border，但页面上看不见；下方元素紧贴浮动块顶部；响应式断点后布局突然错乱。
根本原因：浮动元素不参与父容器高度计算，而::after伪元素能插入一个“占位节点”，配合清除样式，让父容器重新感知子元素边界。
用::after写clearfix的最小可靠写法
别抄网上五花八门的旧版写法，现代浏览器（Chrome 50+ / Firefox 30+ / Safari 10+）只需最简配置：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}关键点：
-
content: ""必须有，否则伪元素不渲染 -
display: table比block更稳妥——它触发BFC，同时避免IE6/7下display: block可能引发的双倍边距bug（虽然现在基本不用兼容了） -
clear: both才是清除动作本身，不是可选的 - 不需要
height: 0或visibility: hidden，content: ""已足够隐藏
clearfix该加在谁身上？什么时候不该用
只加在**浮动子元素的直接父容器**上。比如ul里一堆float: left的li，就在ul上加class="clearfix"。
容易踩的坑：
- 给body或根容器加
clearfix——完全没必要，也没效果 - 在Flex或Grid布局里硬套
clearfix——现代布局模式自带流式控制，加了反而可能干扰对齐 - 用
overflow: hidden替代clearfix来“偷懒”——虽能撑高，但会裁剪position: absolute溢出内容，且影响滚动行为
为什么不用clear: both单独清浮动
clear: both本身只作用于“自身”，不是“清理后代”。你给某个div加clear: both，只是让它避开前面的浮动，不会让它的父容器重新计算高度。
举个例子：
<div class="parent"> <div class="float-left">左</div> <div class="float-right">右</div> <div style="clear: both"></div> <!-- 这个div自己清了，但.parent还是塌陷 --> </div>
所以必须靠伪元素“注入”到父容器内部，才能让父容器意识到：“哦，我里面有个东西需要我撑高”。
真正容易被忽略的点：伪元素默认是inline，display: table不只是为了清除，更是为了确保它能正确参与块级格式化上下文——这点不理解，换用display: block时遇到奇怪间隙就懵了。
