浮动导致父元素高度塌陷是因为浮动元素脱离文档流，父容器无法感知其高度；clearfix伪元素、display: flow-root是更优解，overflow:hidden有裁剪风险。
为什么浮动会让父元素高度塌陷
因为浮动元素脱离了普通文档流，父容器在计算高度时“看不见”它们，只按非浮动子元素布局。常见现象是：div 包着几个 float: left 的 div，结果父 div 高度为 0，背景色或边框消失。
clear: both 不是万能解，用错位置就失效
clear: both 必须加在**浮动元素之后、父容器内部的最后一个子元素上**，否则无法撑开父容器。很多人把它加在浮动元素自己身上（比如写成 float: left; clear: both），这只会阻止该元素被前面的浮动影响，对父容器高度毫无作用。
.clearfix::after {
content: "";
display: block;
clear: both;
}
更稳妥的做法是统一用伪元素清除：给父容器加 clearfix 类，并确保该类包含上述 CSS；不要依赖单个 clear 元素——它容易被遗漏或误删。
overflow: hidden 有隐藏溢出的风险
给父容器设 overflow: hidden 确实能触发 BFC，从而包含浮动子元素，但它会把超出边界的子内容（比如下拉菜单、负 margin 元素、绝对定位偏移过大的弹层）直接裁剪掉。这不是“清除浮动”，只是副作用。
立即学习“前端免费学习笔记（深入）”；
- 适合：布局简单、确认无溢出需求的模块（如导航栏、卡片列表）
- 不适合：含
position: absolute且偏移父容器边界、或使用transform做动画的区域 - 替代方案：优先用
display: flow-root（现代浏览器支持良好，无裁剪副作用）
display: flow-root 是目前最干净的解法
display: flow-root 显式创建一个新的块级格式化上下文（BFC），既能包含浮动子元素，又不会像 overflow: hidden 那样隐藏内容，也不依赖伪元素或额外 DOM 节点。
.container {
display: flow-root;
}
注意兼容性：flow-root 在 Chrome 58+、Firefox 53+、Safari 15.4+ 和 Edge 79+ 支持；如果必须兼容 IE 或老 Safari，回退到 clearfix 伪元素方案更稳妥。
真正容易被忽略的是：清除浮动不是目的，让父容器正确参与布局才是。别为了“清浮动”而强行加 hack，先看是否真需要浮动——很多时候用 flex 或 grid 更直接。
