浮动导致父容器高度塌陷，解决方法包括触发 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。
