浮动导致父容器高度塌陷，解决方法包括触发BFC（如overflow:hidden、display:flow-root）、清除浮动（clearfix或伪元素）、改用Flex/Grid布局。
浮动元素会脱离文档流，导致父容器无法感知其高度，从而出现高度为0的“塌陷”现象。解决的核心思路是让父容器重新包含浮动子元素。
触发BFC（块级格式化上下文）
BFC能隔离内部浮动，使父容器正确计算高度。常用触发方式：
- 给父元素设置 overflow: hidden | auto | scroll（最常用且简洁）
- 设置 display: flow-root（现代推荐，语义清晰，无副作用）
- 使用 float: left | right 或 position: absolute | fixed（但会改变父元素自身定位，慎用）
清除浮动（Clearfix）
在父容器末尾插入一个清除浮动的元素，撑开高度。经典clearfix写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
给父元素添加 class="clearfix" 即可。兼容性好，适合老项目。
立即学习“前端免费学习笔记（深入）”；
使用Flex或Grid布局替代浮动
浮动本就不是为布局设计的，现代布局应优先考虑：
- 父元素设 display: flex，子元素自动参与排列，不再脱离文档流
- 父元素设 display: grid，同样天然规避塌陷问题
这种方式从根源上避免问题，代码更简洁、可控性更强。
伪元素清除（轻量替代方案）
若只需简单清除，可用：
.parent::after {
content: "";
display: block;
clear: both;
}
注意：必须配合 display: block 和 clear: both，否则无效。
不复杂但容易忽略——关键在于理解浮动脱离文档流的本质，再选择匹配场景的方案。新项目优先用 display: flow-root 或 Flex；老项目稳妥用 overflow: hidden 或 clearfix。
