父容器高度塌陷应通过创建BFC解决：首选display: flow-root（无副作用），次选overflow: hidden（兼容好但会裁剪溢出），伪元素清除法兼容旧浏览器；clear: both加在父元素上无效，Flex/Grid布局下无需处理浮动塌陷。
float 元素导致父容器高度为 0 怎么办
这是浮动最经典的问题：父级 div 看起来“消失了”，实际高度塌陷成 0，后续内容往上顶。根本原因在于浮动元素脱离文档流，父容器无法感知其尺寸。
解决思路不是“清除浮动”本身，而是让父容器重新建立 BFC（块级格式化上下文）或强制参与高度计算。以下方法按推荐顺序排列：
-
overflow: hidden或overflow: auto—— 最轻量，兼容性好（IE6+），但注意会裁剪溢出内容，慎用于有下拉菜单、弹层的场景 -
display: flow-root—— 现代首选，专为解决此问题设计，无副作用，Chrome 64+/Firefox 62+/Safari 15.4+ 支持 - 伪元素清除法：
::after { content: ""; display: table; clear: both; }—— 兼容老浏览器，但需额外样式，且display: table可能干扰内联布局
为什么不能只用 clear: both 在父元素上
clear 作用对象是「自身」，不是子元素。给父元素加 clear: both 完全无效——它只会尝试避开前面的浮动兄弟元素，和内部浮动子项无关。
常见误写：.parent { clear: both; }，这既不触发 BFC，也不影响子元素的脱离行为，父容器依然塌陷。
立即学习“前端免费学习笔记（深入）”；
真正起效的是把 clear 加在浮动元素之后的「兄弟元素」上（比如 <div style="clear:both"></div>），但这属于补丁式写法，破坏语义且增加冗余 DOM。
display: flow-root 和 overflow: hidden 的关键区别
两者都能创建 BFC，但行为不同：
-
overflow: hidden会隐藏超出父容器的内容（比如position: absolute子元素越界、动画位移、下拉列表展开），调试时容易漏掉问题 -
display: flow-root只改变格式化上下文，不影响溢出表现，视觉和交互完全可控 - 如果项目需支持 IE11，
flow-root不可用，此时优先用overflow: hidden，并检查是否有真实溢出需求；否则直接上flow-root
Flex/Grid 布局下还用处理 float 塌陷吗
不用。一旦父容器设了 display: flex 或 display: grid，它自动成为 BFC，且浮动元素在 Flex/Grid 容器中会退化为普通块级元素（float 属性失效），不再脱离文档流。
这意味着：
- 父容器高度自动包含浮动子项（因为它们已不“浮”了）
- 但同时也失去了
float的原始排版能力（比如文字环绕图片），此时应改用shape-outside或 Grid 轨道控制 - 混用
float和 Flex 是反模式，容易引发不可预测的渲染结果
真正需要关注的，是那些仍依赖 float 实现图文环绕、多栏布局的老项目——这些地方最容易忽略 BFC 触发条件，一升级就错位。
