使用 overflow 和 padding 可解决浮动导致的父元素高度塌陷。首先，通过设置父容器 overflow: hidden 触发 BFC，使其包含浮动子元素，防止布局塌陷；其次，结合 padding 确保内容与边框间距，提升视觉效果，同时可添加 clear: both 的清除元素保证布局稳定。该方法无需复杂布局技术，兼容性好，适用于旧项目维护和需广泛浏览器支持的场景。
当使用CSS浮动（float）布局时，常会遇到父元素高度塌陷的问题——也就是所谓的“浮动元素折叠”。这是因为浮动元素脱离了正常的文档流，导致其父容器无法正确感知子元素的高度，从而出现布局错乱。解决这个问题有多种方式，其中利用 padding 和 overflow 是两种简单且兼容性良好的技巧。
问题重现：浮动导致父容器高度塌陷
假设有一个父div包含若干向左浮动的子div：
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> </div>
.container {
background: #eee;
border: 1px solid #ccc;
}
.box {
float: left;
width: 100px;
height: 100px;
background: lightblue;
margin: 10px;
}
此时，.container 并不会包裹住两个浮动的 .box 元素，背景色和边框可能不可见或显示异常，这就是高度塌陷。
方法一：使用 overflow 触发 BFC（块级格式化上下文）
给父容器设置 overflow: hidden 或 overflow: auto 可以触发BFC，使父元素形成独立的布局环境，从而包含其内部的浮动元素。
立即学习“前端免费学习笔记（深入）”；
.container {
overflow: hidden; /* 或 overflow: auto */
background: #eee;
border: 1px solid #ccc;
}
这个方法无需添加额外标签，代码简洁，是目前最常用的解决方案之一。注意避免在需要溢出显示内容（如弹出菜单）时使用 overflow: hidden，以免裁剪内容。
方法二：通过 padding 辅助视觉完整性（配合清除浮动）
虽然 padding 本身不能解决高度塌陷，但结合清除浮动（clear）可以增强布局稳定性。常见做法是在父容器底部添加一个清除浮动的元素，并用 padding 保证内容与边界的可读间距。
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="clearfix"></div> </div>
.clearfix {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
.container {
padding: 10px;
background: #eee;
border: 1px solid #ccc;
}
这里的 padding 确保内容不紧贴边框，而 clearfix 元素确保浮动被彻底清除，防止后续元素错位。
推荐实践：结合使用更稳妥
在实际开发中，可以将 overflow 与 padding 结合使用，既解决结构问题，又提升视觉体验：
- 用 overflow: hidden 包裹浮动元素，实现闭合
- 用 padding 增加内边距，避免内容拥挤
- 避免对含有定位下拉、阴影等溢出效果的容器使用 hidden
基本上就这些。掌握 overflow 和 padding 的配合使用，能快速应对大多数浮动布局中的折叠问题，无需依赖复杂的Flex或Grid布局，尤其适合维护旧项目或需要广泛浏览器兼容的场景。
