清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
不清浮动：
清浮动：
原理：
（1） display:block使生成的元素以块级元素显示,占满剩余空间
（2）height:0避免生成内容破坏原有布局的高度
（3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互
（4）通过 content:”.”生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的content:”.”有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的
（5）zoom：1触发IE hasLayout。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box {
width: 510px;
border: #0000FF solid 1px;
}
.box:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.left {
float: left;
width: 250px;
height: 100px;
background-color: green;
}
.right {
float: left;
width: 250px;
height: 100px;
background-color: red;
}
.backdiv{
width: 100px;
height: 100px;
background: #101010;
margin-left: 510px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="backdiv"></div>
</body>
</html>