必须用清除浮动当父容器无高度且子元素全浮动时会导致塌陷；应使用clearfix触发BFC，overflow:hidden有裁剪风险，display:flow-root是无副作用新方案但兼容性有限。
什么时候必须用清除浮动
当父容器没有设置高度，且内部子元素全部浮动时，父容器会塌陷——表现为高度为 0，背景、边框、后续兄弟元素位置异常。这不是 bug，是浮动元素脱离文档流的自然结果。clear 本身只作用于自身，不能让父容器“感知”子浮动；所以真正需要的是让父容器形成 BFC 或触发高度计算。
clearfix 是最稳妥的通用方案
现代项目首选 clearfix 类，它通过伪元素触发 BFC，不依赖结构改动，不影响语义，兼容性覆盖 IE8+：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
使用时只需加在浮动容器上：<div class="clearfix"><div style="float:left">A</div></div>。注意：IE6/7 需要额外加 *zoom: 1 触发 hasLayout，但如今基本可忽略。
overflow: hidden 有隐藏溢出的风险
overflow: hidden 能让父容器创建 BFC，从而包裹浮动子元素，写法最简，但副作用明显：
立即学习“前端免费学习笔记（深入）”；
- 会裁剪掉超出容器的内容（比如下拉菜单、负 margin 元素、动画移出区域的部分）
- 配合
transform或position: fixed时，在某些安卓 WebView 中可能触发渲染异常 - 无法与
scroll或auto同时满足“清浮动 + 可滚动”需求
仅适合确认内容绝对不溢出、且无需滚动的简单布局场景。
display: flow-root 是未来方向但需看兼容要求
display: flow-root 是 CSS 新增的专门用于创建无副作用 BFC 的值，不触发溢出裁剪，也不影响子元素定位行为：
.container {
display: flow-root;
}
但它不支持 IE，Chrome 58+、Firefox 53+、Safari 10.1+ 才开始支持。如果你的项目最低支持 Chrome 60+ 或明确不兼容 IE，可直接用；否则仍需回退到 clearfix。
复杂点在于：多个浮动嵌套时，每一层“需要撑高”的容器都得单独处理；而最容易被忽略的是——用 Flex 或 Grid 布局替代浮动后，根本不需要清浮动。
