在 CSS 中，使用浮动布局可能会影响周围元素，并且还会引发很多预想不到的问题，比如父元素高度塌陷等。为了解决这个问题，在使用浮动布局之后，一般还需要清除浮动才行。
CSS 清除浮动，常用的方式有以下 3 种。
使用 clear 属性清除浮动
在 CSS 中，我们可以使用 clear 属性来清除浮动带来的影响。
语法：
clear: 关键字;说明：
clear 属性取值有 3 种，如下表所示。
| 属性值 | 说明 |
|---|---|
| left | 清除左浮动 |
| right | 清除右浮动 |
| both | 同时清除左浮动和右浮动 |
提示: 在实际开发中，我们很少会单独使用 clear: left; 或 clear: right; 来清除左浮动或右浮动，往往都是直截了当地使用 clear: both; 来把所有浮动清除，简单粗暴又省事！也就是说，我们只需要记住 clear: both; 就可以了。
示例 1：没有清除浮动的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#father {
width: 300px;
background-color:teal;
border: 1px solid silver;
}
#son1, #son2{
padding: 10px;
margin: 20px;
}
#son1 {
background-color: hotpink;
float: left;
}
#son2 {
background-color: orange;
float: right;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
上面是使用了 float 属性之后，没有清除浮动的效果，此时可以看到父元素出现高度塌陷的问题。
示例 2：使用 clear 属性清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#father {
width: 300px;
background-color:teal;
border: 1px solid silver;
}
#son1, #son2{
padding: 10px;
margin: 20px;
}
#son1 {
background-color: hotpink;
float: left;
}
#son2 {
background-color: orange;
float: right;
}
/* 关键代码，清除浮动 */
.clear { clear: both; }
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div class="clear"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义 clear: both 来清除浮动。说白了，前面小弟干了太多坏事，后面得大哥出面才能解决。
在实际开发中，凡是用了浮动之后发现有什么不对劲的地方，首先应该检查的是有没有清除浮动。
注意: clear 属性不是应用于浮动元素本身，而是应用于浮动元素后面的空元素。
使用 overflow 属性清除浮动
在 CSS 中，我们还可以使用 overflow 属性来清除浮动。
语法：
overflow: hidden;说明：
overflow 属性有很多取值，而我们是使用 overflow: hidden; 来清除浮动。
示例 3：overflow: hidden; 清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#father {
overflow: hidden; /* 关键代码，清除浮动 */
width: 300px;
background-color:teal;
border: 1px solid silver;
}
#son1, #son2 {
padding: 10px;
margin: 20px;
}
#son1 {
background-color: hotpink;
float: left;
}
#son2 {
background-color: orange;
float: right;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
overflow: hidden 相对 clear: both 来说，可以避免添加多余的标签，并且还不会破坏 HTML 的语义结构。但 overflow: hidden 其实是个 “小炸弹”，它会隐藏超出父元素的内容部分，有时候这并不是我们预期的效果。
注意: overflow: hidden; 应用于浮动元素的父元素，而不是当前的浮动元素。
使用自定义的 clearfix 清除浮动
在 CSS 中，使用 clear: both; 和 overflow: hidden; 来清除浮动都有明显的弊端。在实际开发中，最好的解决方案是自定义一个名为 clearfix 的 class，然后使用 ::after 伪元素结合 clear: both; 来实现。
语法：
.clearfix::after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}说明：
::after 伪元素结合 clear: both 来清除浮动的方式，我们推荐定义成公共 class（如类名为 clearfix），然后进行全局引用，以便减少 CSS 代码。
其中，::after 是一个伪元素，在 CSS3 动画效果中使用比较多。::before 和 ::after 都是常用的 CSS 伪元素。
示例 4：clearfix 清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.clearfix::after
{
clear:both;
content:"";
display:block;
height:0;
visibility:hidden;
}
#parent
{
width:300px;
border:1px solid black;
}
#first,#second
{
width:100px;
height:40px;
border:1px solid red;
}
#first{float:left;}
#second{float:right;}
</style>
</head>
<body>
<div id="parent" class="clearfix">
<div id="first"></div>
<div id="second"></div>
</div>
</body>
</html>
页面效果如下图所示。
分析：
clear: both 清除浮动会增加多余标签，overflow: hidden 清除浮动会使得超出父元素部分隐藏。使用 ::after 伪元素来清除浮动，则不会有这些缺点。在实际开发中，我们也更倾向于使用这种方法。
实际上，清除浮动的原理是这样的：当父元素中的子元素都设置了浮动后，这些浮动元素会脱离正常的文档流，导致父元素的高度计算不包括这些浮动元素，从而使父元素的高度塌陷为零。而清除浮动的本质就是让父元素能够感知到子元素浮动后的高度，从而正确地包裹住子元素。
