display: flow-root 是当前最优解，它创建无副作用的 BFC，使父容器自然包裹浮动子元素，兼容现代浏览器且不裁剪下拉菜单或影响溢出行为。
直接加 overflow: hidden 最快，但容易裁掉下拉菜单、tooltip 或横向滚动内容；真要稳妥撑开高度，优先用 display: flow-root，现代浏览器全支持，零副作用。
为什么父元素高度会塌陷
子元素用了 float: left 或 float: right 后，就脱离文档流——它不再参与父容器的高度计算。这不是 bug，是 float 的原始设计目的（比如文字绕图）。父容器没内容撑着，高度就缩成 0，常见于导航栏、图文混排、老式两栏布局。
- 只要子元素有
float，哪怕其他子元素没浮动，父容器也大概率塌陷 -
height: auto在父容器上无效，因为“auto”依赖内容贡献高度，而浮动内容不贡献 - 父容器加
border或padding能看到边框，但内部高度仍是 0
display: flow-root 是当前最优解
display: flow-root 是 CSS 新增的专门值，作用就是创建一个无副作用的 BFC。它让父容器自然包裹浮动子元素，又不干扰溢出行为（比如下拉菜单不会被裁）、不触发滚动条、不影响 flex/grid 子项对齐。
- 兼容性已覆盖 Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+
- 写法极简：
.container { display: flow-root; } - 不需要伪元素、不需要额外 DOM、不改变 overflow 默认行为
- 如果项目需兼容 IE11 或更早，此方案不可用，得回退
overflow: hidden 要小心用
overflow: hidden 能撑开高度，是因为它触发了 BFC，不是因为 “hidden” 这个值本身。但它会真实裁剪超出父容器的内容，这是硬伤。
立即学习“前端免费学习笔记（深入）”；
- 常见踩坑：下拉菜单、气泡提示（
position: absolute偏移后超出）、横向滚动区域（overflow-x: auto）全被截断 -
overflow: auto稍好，但空容器在某些浏览器仍渲染滚动条（可用overflow: overlay缓解） - 别写
overflow: visible——它是默认值，不触发 BFC，完全无效 - 若父容器宽度未设（比如
width: auto），overflow: hidden可能失效或表现异常
clearfix 伪元素方案适合老项目
当必须兼容 IE8+ 且不能改布局结构时，用 ::after 伪元素清除浮动最稳妥，语义清晰、无溢出风险。
- 关键代码：
.clearfix::after { content: ""; display: table; clear: both; } - 必须给父容器加 class="clearfix"，否则伪元素不生效
-
display: table或display: block都行，但display: none会让伪元素消失，失效 - 不要漏掉
content: ""—— 没它，伪元素根本不渲染 - Flex/Grid 布局中加 clearfix 没意义，
float和clear在这类容器里已被忽略
真正该花时间判断的，不是“怎么撑开”，而是“是否非用 float 不可”。90% 的浮动场景（导航、卡片、侧边栏）现在用 display: flex 或 display: grid 更干净，天然无塌陷问题，也不用操心清除逻辑。
