父容器高度塌陷是因浮动元素脱离文档流，触发BFC（如overflow:hidden）或伪元素clearfix可修复；现代开发应优先使用Flex/Grid布局替代浮动。
为什么父容器高度会变成0
当子元素用了 float，它就脱离了普通文档流，父容器“看不见”它，自然无法根据子元素撑开高度——这不是bug，是CSS规范行为。常见现象是：背景色没显示、边框包不住内容、后续元素往上跑。
用 overflow: hidden 触发BFC最省事
给父容器加 overflow: hidden（或 auto、scroll）能强制创建BFC，让父容器重新包含浮动子元素。这个方案代码少、兼容性好（IE8+），但要注意：
- 如果父容器本就需要滚动或溢出可见，
hidden会意外裁剪内容 -
overflow: auto在Safari中可能触发不必要的滚动条，建议优先试hidden - 不要对
html或body直接设overflow: hidden，会影响整页滚动
用 ::after 伪元素做clearfix更可控
现代项目推荐用伪元素清除浮动，不干扰溢出行为，语义也更清晰。核心是给父容器加一个类（比如 .clearfix），再配CSS：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意几个关键点：
- 必须有
content，哪怕为空字符串，否则伪元素不渲染 -
display: table比block更稳妥，避免IE6/7下 margin 双倍问题 - 不需要额外HTML标签，也不影响可访问性
- 如果父容器本身是
flex或grid容器，浮动已基本失效，这时不用 clearfix，应改用布局方式本身来控制
Flex布局下根本不需要清除浮动
一旦父容器设了 display: flex，子元素的 float 就自动失效（规范规定），高度塌陷问题不复存在。所以如果你还在为浮动头疼，先问一句：是不是该换布局方式了？
- Flex适用于一维排列（行或列），
float原本的文本环绕场景现在多用shape-outside或wrap - 不要在 flex 容器里混用
float和justify-content，行为不可预期 - 某些老项目升级时容易忽略这点：清除浮动的JS逻辑（如监听
offsetHeight）在Flex下可能永远得不到触发
BFC和clearfix只是补救手段；真正容易被忽略的是：浮动本身在现代CSS中已退居二线，很多所谓“塌陷问题”，其实是布局思路卡在了十年前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
