使用 overflow:hidden 触发 BFC 或 clearfix 伪元素可解决浮动导致的父元素塌陷，现代布局推荐 flex 或 grid 避免问题。
当子元素使用 float 后，父元素无法正常包裹子元素，导致背景、边框等样式“塌陷”不显示。这是因为浮动元素脱离了文档流，父元素无法感知其高度。解决这个问题的关键是触发父元素的 BFC（块级格式化上下文） 或清除浮动影响。
使用 overflow: hidden 触发 BFC
给父元素设置 overflow: hidden 可以让其包含浮动子元素，从而正确显示背景和边框。
- 简单直接，适合大多数场景
- 注意：如果子元素有超出父元素的内容（如弹窗、下拉菜单），可能被意外裁剪
.parent {
overflow: hidden;
background-color: #f0f0f0;
}
.child {
float: left;
width: 100px;
height: 100px;
background: red;
}
使用 clearfix 清除浮动
通过伪元素在父元素末尾插入一个清除浮动的元素，强制父元素包含所有子元素。
- 兼容性好，不会裁剪溢出内容
- 推荐作为通用解决方案
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后将 clearfix 类添加到父元素上即可生效。
立即学习“前端免费学习笔记（深入）”；
现代方案：flex 或 grid 布局替代浮动
如果布局允许，建议用 display: flex 或 display: grid 替代浮动，从根本上避免高度塌陷问题。
- 更语义化，无需处理清除浮动
- 响应式支持更好
基本上就这些方法，根据实际场景选择最合适的方案即可。
