父容器高度塌陷是因为浮动元素脱离文档流，不参与高度计算；clear: both 仅使后续兄弟元素避开浮动，不修复父容器塌陷；现代应优先使用 flex、grid 或 display: flow-root。
现在面试里问“清除浮动”，不是考你怎么写 .clearfix，而是看你是否理解浮动的本质影响和现代替代方案。直接背口诀或堆写法容易露馅。
为什么父容器高度会塌陷？
因为 float 让元素彻底脱离文档流——它不占空间、不参与父容器高度计算。哪怕子元素设置了 height: 200px，只要加了 float: left，父容器的 height 就还是 auto（实际为 0）。
常见现象包括：
- 父容器背景色/边框“消失”
- 后续兄弟元素向上顶替，盖住浮动内容
-
padding-bottom看不见，margin表现异常
clear: both 是怎么起作用的？
clear 不是“清掉 float”，而是控制一个元素的**边界不能紧贴前面的浮动元素**。设 clear: both 后，该元素会下移，直到它的上边缘避开所有左侧和右侧的浮动元素。
立即学习“前端免费学习笔记（深入）”；
所以它只对「紧跟在浮动元素后面的那个块级元素」生效，比如：
<div class="float-left"></div> <div class="clear-both"></div> /* 这个 div 会被推到浮动元素下方 */
但它无法让父容器自身“感知”浮动子元素高度——这是很多初学者误用的关键点。
.clearfix::after 为什么必须用 display: table？
这个写法本质是插入一个无内容但能触发换行的块级伪元素，靠 clear: both 把父容器底部“拉下来”。display: table 是关键：
- 在 IE6–7 中，
display: block+clear: both会失效，而table能触发 hasLayout，保证清除有效 -
content: ""必须存在，否则伪元素根本不渲染，clear形同虚设 - 不需要
height: 0或visibility: hidden：现代浏览器中空content已足够隐藏
最简可靠版本就是：
.clearfix::after {
content: "";
display: table;
clear: both;
}
现在还该手动写 clearfix 吗？
绝大多数情况不该。截至 2026 年，display: flex 和 display: grid 已成为横向排列和多列布局的事实标准：
- 它们天然让父容器包含子元素高度，不存在塌陷问题
- 语义清晰、响应式友好、调试直观
- 仅在维护老项目、兼容极旧内核（如某些 Android WebView）或需要文本环绕图片时，才需保留浮动+清除逻辑
真正容易被忽略的是：很多人还在用 overflow: hidden “凑合”清除，却没意识到它会裁剪 position: absolute 子元素溢出部分——比如弹出菜单、tooltip、下拉面板，一加就失效。
