在前端CSS布局中，float属性是早期实现多列布局的常用手段，但浮动元素会脱离文档流，导致父元素无法感知浮动子元素的高度，出现高度塌陷的问题。为了解决这类浮动带来的布局异常，就出现了清除浮动和闭合浮动两种解决方案。
浮动的基本特性
当给元素设置float: left或者float: right之后，元素会脱离标准文档流，向左或者向右浮动，直到碰到父元素的边界或者其他浮动元素为止。浮动元素不会占据文档流的空间，因此父元素如果没有设置固定高度，就会出现高度塌陷的问题，后续的非浮动元素也会向上移动，导致布局错乱。
我们可以通过下面的简单示例看到浮动带来的高度塌陷问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
border: 2px solid #333;
background-color: #f0f0f0;
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: #4CAF50;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
运行上述代码可以看到，父元素的边框紧紧包裹在内容区，没有包含浮动的两个子元素，这就是典型的高度塌陷现象。
什么是闭合浮动
闭合浮动指的是让浮动元素的父元素能够感知到浮动子元素的高度，从而正确包裹所有子元素，本质是触发父元素的BFC（块级格式化上下文），或者让父元素内部有内容清除浮动的影响，使得父元素的高度被浮动子元素撑开。
常见的闭合浮动实现方式
- 给父元素设置
overflow: hidden或者overflow: auto，触发父元素的BFC，BFC内部的浮动元素会被计算高度。 - 使用伪元素清除浮动，这是目前最常用的闭合浮动方案，兼容性也比较好。
伪元素闭合浮动的代码示例：
/* 定义一个通用的闭合浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
/* 兼容IE6、IE7 */
.clearfix {
*zoom: 1;
}
使用的时候只需要给父元素添加clearfix类即可：
<div class="parent clearfix">
<div class="child"></div>
<div class="child"></div>
</div>
什么是清除浮动
清除浮动指的是让某个元素不受前面浮动元素的影响，回到标准文档流中正常排列，不会影响自身的布局位置，本质是设置clear属性，让元素的一侧不允许出现浮动元素。
清除浮动的实现方式
- 给需要清除浮动的元素设置
clear: left，表示左侧不允许有浮动元素。 - 设置
clear: right，表示右侧不允许有浮动元素。 - 设置
clear: both，表示左右两侧都不允许有浮动元素，这是最常用的取值。
清除浮动的代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: #2196F3;
}
.normal-box {
width: 200px;
height: 150px;
background-color: #FF9800;
clear: both; /* 清除左右两侧的浮动影响 */
}
</style>
</head>
<body>
<div class="float-left">浮动元素</div>
<div class="normal-box">清除浮动后的元素</div>
</body>
</html>
上述代码中，橙色盒子设置了clear: both，因此不会和前面的蓝色浮动元素并排，会显示在浮动元素的下方。
清除浮动和闭合浮动的核心区别
| 对比维度 | 闭合浮动 | 清除浮动 |
|---|---|---|
| 作用对象 | 浮动元素的父元素 | 浮动元素之后的相邻元素 |
| 核心目的 | 解决父元素高度塌陷问题，让父元素包裹浮动子元素 | 让后续元素不受浮动元素影响，回到标准文档流排列 |
| 实现原理 | 触发父元素BFC，或者让父元素内部有清除浮动的内容 | 设置元素的clear属性，禁止一侧出现浮动元素 |
| 适用场景 | 父元素没有固定高度，内部有浮动子元素的情况 | 浮动元素后面的元素需要正常排列，不被浮动元素覆盖的情况 |
实际开发中的选择建议
如果是为了解决父元素高度塌陷的问题，优先选择闭合浮动的方案，尤其是伪元素清除浮动的方式，不会额外增加DOM节点，兼容性也比较好。如果是在浮动布局之后，有元素需要正常排列，不被浮动元素影响，就使用清除浮动的方案，给对应元素设置clear属性即可。
需要注意的是，现在CSS布局更多使用flex或者grid方案，这两种布局方式本身不会出现浮动带来的高度塌陷问题，因此如果项目没有兼容老版本浏览器的需求，也可以优先考虑使用flex或者grid来替代float布局，从根源上避免浮动相关的问题。