一：定义
clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”，引用鑫哥的话，鑫哥博客源地址为http://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-use/
二：例子
情景：当我想把< li>横向排列时，就会想到用float：left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0 auto;
padding: 0 auto;
list-style: none;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">我想要有一万工资</a></li>
<li><a href="#">我想要有两万工资</a></li>
<li><a href="#">我想要有三万工资</a></li>
<li><a href="#">我想要有四万工资</a></li>
</ul>
<p class="p2">所以我必须努力啊啊啊啊嗄</p>
<img src="qw.jpg" style="width: 80px;height: 120px;">
</div>
</body>
</html>
然而用完却变成这样，p跑到li后面去了，原因是受到了li浮动的影响
所以我们必须对p清除左浮动
.p2{
clear: left;
}完整示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0 auto;
padding: 0 auto;
list-style: none;
}
a{
text-decoration: none;
}
li{
float: left;
width: 140px;
height: 40px;
background-color: yellow;
}
.p2{
clear: left;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">我想要一万工资</a></li>
<li><a href="#">我想要两万工资</a></li>
<li><a href="#">我想要三万工资</a></li>
<li><a href="#">我想要四万工资</a></li>
</ul>
<p class="p2">所以我必须努力啊啊啊啊嗄</p>
<img src="qw.jpg" style="width: 80px;height: 120px;">
</div>
</body>
</html>看，p又独自一段啦啦啦啦
最后，再回味一下那句