使用 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 会自动扩展高度，包裹两个浮动的子元素。
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，从根本上避免此类问题。
