一:定义
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又独自一段啦啦啦啦
最后,再回味一下那句