我们简单总结下清除浮动的几种方式：
首先我们得明白，如下布局，如果不清除浮动，那将会怎样：class为one的盒子将会和父级盒子部分重合在一起，且父级盒子无法被子级撑开。那我们要清除浮动达到的效果就是：父级盒子被撑开，下面的盒子不会重叠在一起。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
border: 1px solid blue;
/** 方式二：父级加overflow：hidden清除，*/
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background: red;
float: left;
}
.one {
width: 100px;
height: 200px;
background: green;
}
/** 方式三：在父级元素加伪类元素清除浮动（推荐使用） */
.clear:after {
content: "";
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden; /*将元素隐藏起来*/
/*在页面的clearfix元素后面添加了一个空的块级元素（这个元素的高为0，行高也为0，并且这个元素清除了浮动）*/
}
</style>
</head>
<body>
<div class="father clear">
<div class="son"></div>
</div>
<!--方式一：增加额外的一个盒子来清除浮动-->
<!--<div style="clear: both"></div>-->
<div class="one"></div>
</body>
</html>
如代码上面：
- 方式一：在父元素盒子后面增加一个空盒子：clear：both清除浮动，浮动的影响虽然清除了，但是父盒子的高度没有办法撑开，而且还增加了没有必要的标签，
- 方式二：用overflow：hidden清除，这种清除的弊端是当父元素块里面的内容确实多余了父元素时，那多出的部分将会被隐藏，所以这种方式只有特定的时候才能用，比如内容不会溢出父元素。
- 方式三：增加伪元素，如上面所述。推荐使用这种方式
