使用 overflow: hidden 和 clearfix 可解决浮动导致的高度塌陷问题。1. overflow: hidden 通过触发 BFC 包裹浮动元素，但会裁剪溢出内容；2. clearfix 利用伪元素清除浮动，不影响溢出显示，更灵活通用；建议优先考虑 flex 或 grid 布局以避免此类问题。

当使用 CSS 的 float 属性进行布局时，常会遇到父容器无法正确包裹浮动子元素的问题，导致布局错乱。这种现象称为“浮动溢出”或“高度塌陷”。解决该问题的常用方法是使用 overflow: hidden 和 clearfix 技术。下面详细介绍这两种方法的应用场景和实现方式。

1. 使用 overflow: hidden 解决溢出

给父容器设置 overflow: hidden 可以强制其包含内部浮动元素，同时裁剪溢出内容。这是一种简单直接的方法。

适用场景： 父容器没有边框或背景需要延伸，且不需要显示超出边界的内容。

示例代码：

.container {
  overflow: hidden;
}
.float-left {
  float: left;
  width: 50%;
}

此时 .container 会自动扩展高度，包裹两个浮动的子元素。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

2. 使用 Clearfix 清除浮动

当不能使用 overflow: hidden（比如需要显示溢出内容或使用绝对定位）时，推荐使用 clearfix 方法。它通过伪元素在容器末尾插入一个清除浮动的元素。

现代 clearfix 写法：

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

将 clearfix 类应用到浮动元素的父容器上即可生效。

HTML 示例：

<div class="clearfix">
  <div class="float-left">左侧内容</div>
  <div class="float-right">右侧内容</div>
</div>

3. 两种方法对比与选择建议

• overflow: hidden：写法简单，但会隐藏超出容器的内容，不适合有下拉菜单、弹窗等场景。
• clearfix：更灵活，不影响视觉表现，推荐作为通用解决方案。
• 现代布局中，也可考虑使用 flex 或 grid 替代 float，从根本上避免此类问题。

基本上就这些。根据实际需求选择合适的方法，能有效避免浮动带来的布局问题。