父容器不自动撑开浮动子元素是因为浮动元素脱离普通文档流，导致高度塌陷；overflow: hidden 能清除浮动但有裁剪副作用；推荐用 display: flow-root 创建无副作用的BFC，或直接改用 flex/grid 布局。
为什么父容器不自动撑开浮动子元素
因为浮动元素脱离了普通文档流，父容器在计算高度时直接“看不见”它们，导致高度塌陷。这不是 bug，是 CSS 浮动的原始设计行为——浮动本意就是让文字环绕图片，不是用来做布局的。
常见现象：div 里放了几个 float: left 的 div，父容器高度为 0，背景色/边框消失，后续元素往上顶。
用 overflow: hidden 真的能清除浮动吗
能，但它是副作用，不是语义化清除。设置 overflow: hidden（或 auto、scroll）会触发 BFC（块级格式化上下文），而 BFC 容器会包含内部浮动元素的高度。
- 优点：代码少，兼容性好（IE6+）
- 缺点：
overflow: hidden会意外裁剪溢出内容（比如下拉菜单、负 margin 元素、动画移出区域的部分） -
overflow: auto在某些浏览器可能加滚动条（即使没溢出），overflow: scroll强制显示滚动条，都不干净
更现代、更安全的替代方案
推荐优先用 display: flow-root —— 这是专为解决此问题设计的属性，它显式创建 BFC，且不附带任何溢出裁剪或滚动条副作用。
立即学习“前端免费学习笔记（深入）”；
示例：
.container {
display: flow-root; /* ✅ 推荐，语义清晰，无副作用 */
}
兼容性注意：flow-root IE 不支持（Edge 79+、Chrome 58+、Firefox 53+、Safari 15.4+ 支持）。如需兼容 IE，可回退到伪元素清除法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后给父容器加 class="clearfix"。这个方案无溢出风险，也无需 hack。
flex 或 grid 布局下还用清浮动吗
完全不用。一旦父容器设了 display: flex 或 display: grid，它就自动成为 BFC 容器，且子元素默认不再需要 float —— 浮动在 flex/grid 容器内会被忽略（除少数例外，如 float 配合 position: absolute）。
所以真正该做的，是逐步淘汰浮动布局，改用语义明确、行为可控的现代布局方式。如果还在用 float，大概率说明布局结构本身可以重构。
flow-root 是过渡期最轻量、最干净的补救手段；而彻底放弃 float，才是避免这类问题反复出现的根本办法。
