当一个元素用上clear时,如果clear值为left则表示这个元素的左边不能有float元素;如果为right则表示这个元素的右边不能有float元素;如果为both则左右两边都不能有float元素。
例子:
<html>
<head>
<title>float 4</title>
<style type="text/css">
div#div1
{
width: 80px;
height: 80px;
background-color: yellow;
float: left;
}
div#div2
{
width: 80px;
height: 80px;
background-color: green;
float:left;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
这时div2没有用clear,所以div2会跟在div1的后面。
如果div2用上clear:left,由于这时div2左边不能有float元素,而div1又是float元素,所以div2只能移到下一行:
记住,clear只能对当前元素(使用它的元素)起作用,也就是只会影响当前元素的位置,不会影响其他元素的位置。
比如:
<html>
<head>
<title>float 4</title>
<style type="text/css">
div#div1
{
width: 80px;
height: 80px;
background-color: yellow;
float: left;
}
div#div2
{
width: 80px;
height: 80px;
background-color: green;
float:left;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
这时两个div都是float:left,所以div2会跟在div1的右边。如果我们想让div2另起一行,有些人可能会给div1加上clear:right,表示不允许div1右边不能有float元素,但这样是行不通的。因为我们现在是给div1加clear,所以只能改变div1的位置,而我们现在想改变的是div2的位置。
<html>
<head>
<title>float 4</title>
<style type="text/css">
div#div1
{
width: 80px;
height: 80px;
background-color: yellow;
float: left;
clear:right;
}
div#div2
{
width: 80px;
height: 80px;
background-color: green;
float:left;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
所以正确的做法是给div2加上clear:left:
<html>
<head>
<title>float 4</title>
<style type="text/css">
div#div1
{
width: 80px;
height: 80px;
background-color: yellow;
float: left;
}
div#div2
{
width: 80px;
height: 80px;
background-color: green;
float:left;
clear: left;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
接着看个更复杂的例子。:
<!DOCTYPE html>
<html>
<head>
<style>
#div1,#div2, #div3, #div4
{
width:80px;
height:80px;
}
#div1{
border:1px solid red;
background:red;
float:left;
}
#div2
{
border:1px solid green;
background:green;
float:left;
}
#div3
{
border:1px solid blue;
background:blue;
float:left;
}
#div4
{
border:1px solid yellow;
background:yellow;
}
</style>
</head>
<body>
<div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
这时候div4的位置实际上在div1那里,只不过被div1覆盖了。
如果在div2和div3之间加上clearfix:
<!DOCTYPE html>
<html>
<head>
<style>
#div1,#div2, #div3, #div4
{
width:80px;
height:80px;
}
#div1{
border:1px solid red;
background:red;
float:left;
}
#div2
{
border:1px solid green;
background:green;
float:left;
}
#div3
{
border:1px solid blue;
background:blue;
float:left;
}
#div4
{
border:1px solid yellow;
background:yellow;
}
.clearfix
{
clear: both;
}
</style>
</head>
<body>
<div>
<div id="div1"></div>
<div id="div2"></div>
<div class="clearfix">sdfewr</div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
按顺序渲染时,由于div1和div2都是float:left,所以它们会在第一行紧挨着。接着到clearfix,由于其有clear:both,所以它左边不能有float元素,所以它会移到下一行。接着是div3,由于div3在clearfix的后面,所以div3不能覆盖clearfix,又由于div是块级元素,所以div3只能在clearfix的下一行。接着是div4,由于div3是float:left,所以div4会被div3覆盖。
如果clearfix也加入float:left的话:
<!DOCTYPE html>
<html>
<head>
<style>
#div1,#div2, #div3, #div4
{
width:80px;
height:80px;
}
#div1{
border:1px solid red;
background:red;
float:left;
}
#div2
{
border:1px solid green;
background:green;
float:left;
}
#div3
{
border:1px solid blue;
background:blue;
float:left;
}
#div4
{
border:1px solid yellow;
background:yellow;
}
.clearfix
{
clear: both;
float: left;
}
</style>
</head>
<body>
<div>
<div id="div1"></div>
<div id="div2"></div>
<div class="clearfix"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
这时页面上看上去的效果是一样的,不过这时div4的位置实际上移到了div1的位置上,只不过被div1覆盖了。造成现在与刚才这两种情况的原因是,刚才由于clearfix没有float,所以其实标准流的,所以它后面的非float元素只能跟在它后面。而现在clearfix也加入了float,那么div4前面的所有元素都是float,所以它们都会脱离标准流,所以div4才会被div1覆盖。所以非浮动元素会一直往前走,直到遇到非浮动元素并跟在它后面,同时可能被浮动元素覆盖。