使用 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 方法写法：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后将 clearfix 类添加到父元素上即可生效。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

现代方案：flex 或 grid 布局替代浮动

如果布局允许，建议用 display: flex 或 display: grid 替代浮动，从根本上避免高度塌陷问题。

• 更语义化，无需处理清除浮动
• 响应式支持更好

基本上就这些方法，根据实际场景选择最合适的方案即可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！