父容器高度塌陷是浮动元素脱离文档流导致的规范行为，非bug；推荐用display: flow-root触发bfc解决，兼顾无副作用与现代浏览器支持，overflow:hidden虽可触发bfc但会裁剪溢出内容，clearfix仅用于兼容老浏览器。
float 元素脱离文档流，父容器“看不见”它们
父容器高度变成 0px 不是 bug，是 CSS 规范行为。只要子元素设置了 float: left 或 float: right，它就从普通文档流中移出——不再参与父容器的 height 计算。父容器像没渲染过这些子元素一样，只按剩余非浮动内容（比如纯文本、div 里没 float 的兄弟）撑高。
常见错误现象包括：background-color 不显示、border 缩成一条线、后续兄弟元素往上顶、margin-top 像失效了一样。
display: flow-root 是现代标准解法
给父容器加 display: flow-root，一行代码就能让父容器重新包含所有浮动子项，且无副作用：
.container {
display: flow-root;
}
它明确触发 BFC（块级格式化上下文），强制父容器把浮动子元素纳入高度计算。优势很实在：
-
overflow: hidden会裁剪position: absolute弹层或box-shadow，flow-root完全不干预溢出行为 - 不会改变子元素的排布逻辑（不像
display: flex会重置float的作用） - Chrome 64+ / Firefox 58+ / Safari 15.4+ 均原生支持，2026 年已可放心用
overflow: hidden 为什么常被误用
很多人写 overflow: hidden 是为了“清浮动”，但它实际干的是两件事：触发 BFC + 裁剪溢出内容。问题在于后者：
- 下拉菜单、tooltip、动画移出边界的元素会被切掉
- 某些
transform或scale场景下，阴影或虚线边框可能意外消失 - Safari 对
overflow: auto渲染更敏感，滚动条可能无故出现，hidden更稳定但风险更高
如果你的父容器本就需要控制溢出（比如轮播图外层），那 overflow: hidden 是顺带解决塌陷；否则，纯为高度而加，就是拿副作用换功能。
clearfix 还要不要写
现在只在两个场景下才需要 .clearfix：
- 必须兼容 IE11 及更老浏览器（
display: flow-root不支持） - 对接无法修改的第三方 HTML（比如 CMS 输出的固定结构，你只能加 class）
标准写法必须三要素齐全：content: ""、display: table、clear: both。漏掉 content: "" 是最常见错误——伪元素根本不会渲染，清除完全无效。
真正容易被忽略的点是：加了 flow-root 或 clearfix 后高度“回来”了，不代表布局稳了。还得回头检查 margin-collapse、min-height 冲突、或者父容器用了 vertical-align 导致基线错位——这些会让视觉高度看似正常，但和相邻元素间距异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
