父容器高度塌陷是因浮动元素脱离文档流，解决方法包括clearfix（兼容性好）、触发BFC（如overflow:hidden或display:flow-root），现代推荐flow-root；预防优先用Flexbox或Grid布局。
当父容器内只有浮动子元素时，父容器高度会塌陷为0，导致布局错乱。本质是浮动元素脱离文档流，父容器无法感知其高度。解决核心思路是让父容器“包含”浮动子元素，常用方法是触发BFC或使用clearfix。
使用clearfix清除浮动
在父容器上添加clearfix类，通过伪元素插入并清除浮动，是最经典兼容性好的方案。
- 给父容器添加class="clearfix"
- CSS中定义： .clearfix::after { content: ""; display: table; clear: both; }
- IE6/7需额外支持：加.clearfix { *zoom: 1; }触发hasLayout
触发BFC主动包含浮动
BFC（块级格式化上下文）区域内的子元素，包括浮动元素，都会参与高度计算。只需让父容器形成BFC即可自然撑开。
- 常见触发方式（任选其一）： overflow: hidden | auto | scroll
- 其他有效方式：display: flow-root（现代推荐，无副作用）、float: left/right、position: absolute/fixed、contain: layout
- 注意：overflow: hidden可能意外裁剪内容，慎用；display: flow-root兼容性较好（Chrome 58+、Firefox 53+、Safari 15.4+），语义清晰无副作用
现代开发优先推荐flow-root
相比clearfix和overflow，display: flow-root专为解决此类问题设计，不干扰布局、不隐藏溢出、无需伪元素，代码更简洁。
立即学习“前端免费学习笔记（深入）”；
- 直接写：.container { display: flow-root; }
- 它创建独立的BFC，同时保留块级盒行为，子元素正常流式布局
- 如需兼容老版本IE，再回退到clearfix方案
避免塌陷的根本建议
预防优于修复。日常开发中可减少对浮动布局的依赖，改用更现代的方案。
