overflow: hidden 通过触发 bfc 包含浮动子元素高度来解决塌陷，但会裁剪溢出内容；display: flow-root 是更安全现代的替代方案，专为解决此问题设计。
浮动元素导致父容器高度塌陷，为什么 overflow: hidden 能解决
当子元素使用 float: left 或 float: right 时，它们会脱离文档流，父容器无法感知其高度，表现为“高度为 0”——这就是常说的塌陷。设置 overflow: hidden 并非靠“隐藏溢出”起作用，而是触发了父容器的 BFC（块级格式化上下文），而 BFC 容器会包含内部浮动元素的高度。
注意：overflow: hidden 是副作用生效，不是设计本意；它同时会裁剪真正溢出的内容（比如下拉菜单、tooltip），这点常被忽略。
- 仅适用于父容器本身不需要内容溢出的场景
- 不兼容 IE6/7 的某些怪异模式（需配合
zoom: 1） - 若父容器已有
overflow: visible或auto，改写为hidden可能破坏交互逻辑
用 width 或 max-width 显式限制父容器宽度是否有效
设置 width 或 max-width 本身不能解决塌陷问题，它只控制父容器的水平尺寸，对高度计算无影响。但若配合其他条件，可能“看起来”解决了问题：
- 父容器有固定
height：强行撑开，但失去自适应能力 - 父容器是行内元素（如
span）被设为display: block+width：仍会塌陷，除非触发 BFC - 浮动子元素总宽度 ≤ 父容器
width：布局不出错，但高度依然为 0（inspect 元素可见）
简言之：width 管宽，overflow 或 display: flow-root 才管高。
立即学习“前端免费学习笔记（深入）”；
更现代、更安全的替代方案：display: flow-root
display: flow-root 是专为解决浮动塌陷而生的 CSS 值，语义清晰、副作用可控，且不会意外裁剪内容。
/* 推荐写法 */
.container {
display: flow-root;
}- IE 不支持（Edge 17+ / Chrome 58+ / Firefox 54+ 支持）
- 比
overflow: hidden更精准：只建立 BFC，不干预溢出行为 - 与
width、margin等属性完全正交，可自由组合
实际项目中该选哪个
如果需要兼容老浏览器（如 IE11 及以下），overflow: hidden 仍是稳妥选择，但务必检查是否有下拉、弹层类组件被截断；如果项目已放弃 IE，优先用 display: flow-root；避免仅靠 width 来“假装”问题已解决——塌陷仍在，只是没暴露在视觉上。
最易被忽略的一点：多个浮动元素之间若有 margin 或 gap，即使父容器触发了 BFC，也可能因盒模型计算误差导致换行或错位，此时需额外验证子元素的 box-sizing 和总宽度。
