浮动元素使父容器高度塌陷是因为其脱离文档流，父容器无法感知其高度；正确清除方式包括伪元素法（需content+display+clear）、overflow隐藏或display:flow-root，而非在父容器设clear:both。
浮动元素为什么会让父容器高度塌陷
因为 float 会让元素脱离普通文档流，父容器在计算高度时“看不见”浮动子元素，只按非浮动内容撑开。常见现象是：父容器背景色/边框突然消失、后续元素上移覆盖浮动区域。
clear: both 不是万能解，用错位置就失效
clear 只对紧跟在浮动元素之后的**块级兄弟元素**生效，不是给父容器加就能清浮动。很多人在父容器上写 clear: both，完全没用——它不作用于自身，只影响布局顺序。
- ✅ 正确：在浮动元素后面加一个空
<div>，并设clear: both - ❌ 错误：给父容器加
clear: both（无效） - ⚠️ 注意：
clear对inline或flex子项不起作用
推荐用 BFC 方式清除浮动，但别乱触发
让父容器形成 BFC（块级格式化上下文），就能包含内部浮动元素，自然撑高。常用且安全的方式是：
- 给父容器设
overflow: hidden或overflow: auto（注意：可能意外裁剪position: absolute子元素或阴影） - 用
display: flow-root（现代标准方案，无副作用，Chrome 64+/Firefox 62+ 支持） - 避免用
display: inline-block或float自身来触发 BFC，会改变父容器的显示行为
伪元素清除法要写全，漏掉 display 就白干
这是兼容性好、语义干净的主流做法，但必须写完整：
立即学习“前端免费学习笔记（深入）”；
.container::after {
content: "";
display: table;
clear: both;
}
漏掉 display: table（或 block）会导致伪元素不占行、clear 失效；content: "" 缺失则伪元素根本不会渲染。
如果父容器本身是 flex 或 grid 容器，::after 默认不参与主轴排列，此时需额外设 flex: 0 0 100% 或改用 display: flow-root。
