clear属性用于在块级元素中清除浮动效果的其值可以设置成：
clear：both 清除左右两边的的浮动
clear：left 清除左边的浮动
clear： right 清除右边浮动
clear： none 左右都有浮动效果
与float的区别不同的是，clear是清除float的之前的设置效果重新在新的一行生成其设置的值的效果
演示代码：
<style>
body{
width: 500px;
height: 400px;
border: 1px solid #000;
}
.div1 {
width: 100px;
height: 100px;
background-color: rgb(0, 255, 255);
text-align: center;
line-height: 100px;
margin: 10px 10px;
float: left;
}
.div2 {
width: 100px;
height: 100px;
line-height: 100px;
background-color: rgb(10, 200, 255);
text-align: center;
margin: 10px;
float: left;
}
.div3 {
width: 100px;
height: 100px;
line-height: 100px;
background-color: rgb(90, 0, 255);
text-align: center;
margin: auto 10px;
clear: left;
float: right;
}
.div4 {
width: 100px;
height: 100px;
line-height: 100px;
background-color: rgb(0, 0, 255);
text-align: center;
margin: auto 10px;
clear: right;
float: left;
}
</style>
<body>
<div class="div1">A</div>
<div class="div2">B</div>
<div class="div3">C</div>
<div class="div4">D</div>
</body>
结果：
