浮动导致父容器高度塌陷是因为浮动元素脱离文档流，父容器无法感知其高度；正确清除方式是用clearfix伪元素触发BFC并clear:both；现代布局应优先使用flex或grid。
为什么浮动元素会让父容器高度塌陷
浮动元素脱离普通文档流，父容器无法感知其高度，导致后续元素上移、内容重叠。这不是“bug”，而是 CSS 浮动的原始设计行为——它本就为文字环绕图片这类场景服务，不是用来做布局的。
常见现象：div 包着几个 float: left 的子项，但父 div 在开发者工具里显示高度为 0，背景色/边框消失，下面的模块直接顶上来。
clear: both 为什么不能只加在最后一个浮动子元素上
加 clear: both 到最后一个浮动子元素，只能阻止它被前面的浮动影响，但父容器依然不知道“所有浮动已经结束”，高度照样塌陷。
真正要解决的是父容器的包裹能力，不是子元素的位置。所以清除动作必须作用于父容器内部的“末尾位置”，且不能脱离文档流。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：
（只清自己，不撑父容器） - 正确思路：在父容器末尾插入一个「参与文档流但能感知浮动边界」的元素或伪元素
推荐方案：用 ::after 伪元素触发 BFC 并清除浮动
这是目前最干净、无额外 HTML、兼容性足够（IE8+）的做法。核心是两件事：创建 BFC（让父容器包含浮动），同时在末尾插入清除行为。
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
-
display: table触发 BFC，使父容器重新计算高度 -
clear: both确保该伪元素下移至所有浮动元素下方 - 必须加
content: ""，否则伪元素不渲染 - 不要用
display: block+clear: both单独写，它不触发 BFC，IE6/7 下可能失效
现代替代方案：flex 或 grid 布局根本绕过浮动
如果只是为了多列并排，float 已是过时方案。用 display: flex 或 display: grid 不仅自动包含子项、无塌陷问题，还能响应式对齐、等高、顺序控制。
例如替换浮动列表：
.container {
display: flex;
}
.item {
flex: 1; /* 或设 width */
}
注意：若项目需支持 IE9 及以下，仍得回退到 ::after 清除；但只要支持 IE10+，flex 就比浮动 + 清除更可靠、更少意外。
真正容易被忽略的是：清除浮动只是“补救”，而放弃浮动才是根治。很多团队还在封装 clearfix 工具类，却没意识到它本身就在提醒你——这个布局方式已经该淘汰了。
