容器高度塌陷不是 bug，是浮动元素脱离文档流后的必然结果；解决核心是让父容器重新感知子元素高度，路径只有两条：触发BFC或清除浮动；推荐优先使用display:flow-root，语义清晰、无副作用、兼容主流浏览器；overflow:hidden虽可触发BFC但会裁剪溢出内容，clearfix需确保伪元素content非空、display为block/table且父元素未设overflow隐藏。
容器高度塌陷不是 bug，是浮动元素脱离文档流后的必然结果；解决它不靠“修”，而靠让父容器重新“感知”子元素高度——核心路径只有两条：触发 BFC 或清除浮动。
为什么 overflow: hidden 有时会失效或出问题
它确实能触发 BFC，让父容器包含浮动子元素，但副作用很实在：
-
overflow: hidden会裁剪所有溢出内容，比如下拉菜单、阴影、tooltip、绝对定位的提示框，一旦它们超出父容器边界就直接消失 - 在某些旧版 iOS Safari 中，
overflow: auto可能意外触发滚动条，哪怕内容根本没溢出 - 如果父容器本身需要横向滚动（比如横向长列表），
overflow: hidden会把scrollLeft行为锁死
别把它当万能开关，尤其在组件化开发中，一个被封装的卡片组件若内部用了 overflow: hidden，外部调用时可能莫名其妙丢失弹层。
display: flow-root 是什么，为什么推荐它
它是 W3C 明确定义的 BFC 触发方式，语义清晰、无副作用、一行生效：
立即学习“前端免费学习笔记（深入）”；
- 它创建一个独立的块级格式化上下文，但保留块级盒行为（不像
flex或grid会改变子元素排布逻辑） - 不隐藏溢出，不干扰滚动，不强制子元素变成 flex item 或 grid item
- 兼容性已足够好：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；2026 年绝大多数真实用户环境都覆盖到了
写法就是：.container { display: flow-root; }。不需要伪元素、不用 hack、不污染 DOM。
clearfix 还要写吗？怎么写才不出错
如果项目仍需支持 Safari
- 漏掉
content: ""：伪元素没内容就不渲染，clear: both完全无效 - 用
display: block而非display: table：IE8 下block无法撑起高度，必须用table或block+height: 0配合 - IE 兼容写成
zoom: 1（没星号）：IE6/7 只认*zoom: 1，漏掉*就不触发 hasLayout - 在 Flex/Grid 容器上加 clearfix：完全冗余，既不起作用也不报错，纯属浪费调试时间
标准写法应为：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
真正容易被忽略的点：塌陷常不是单一原因
很多情况下，你加了 flow-root 或 clearfix 还是塌，往往是因为：
- 子元素上意外继承了
float（比如第三方 UI 库的 class 污染） - CSS 优先级被更高权重的规则覆盖，比如某个全局 reset 把
float强制设回none - 父容器本身被
position: absolute或display: contents干扰，导致它根本不参与文档流高度计算
调试时别只盯着“清没清浮动”，先打开开发者工具的 Computed 面板，直接看父容器的 float 值和 display 值，再查它的 height 是怎么算出来的——比猜快得多。
