使用clear屬性清除浮動是司空見慣的事情，對於clear屬性的定義可能也爛熟於胸了。
例如，clear:left是清除左側的浮動元素，實例代碼如下：
復制代碼代碼如下:
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.first
{
width:100px;
height:100px;
border:1px solid red;
float:left;
}
.second
{
width:100px;
height:100px;
border:1px solid blue;
float:left;
}
.third
{
width:100px;
height:100px;
border:1px solid green;
float:left;
clear:left;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
</html>
從以上代碼可以看出，第三個div的clear:left屬性的作用得到了體現，元素產生換行。但是使用clear:right屬性的時候未必奏效了。實例代碼如下:
復制代碼代碼如下:
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.first
{
width:100px;
height:100px;
border:1px solid red;
float:left;
}
.second
{
width:100px;
height:100px;
border:1px solid blue;
float:left;
clear:right;
}
.third
{
width:100px;
height:100px;
border:1px solid green;
float:left;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
</html>
以上代碼盡管第二個div有clear:right代碼，但是它的右側還是出現了浮動元素。這主要代碼是順序執行的，當執行到第二個div要清除右浮動的時候，第三個div並沒有被加載，所以它的清除效果也就無效了，於是第三個div依然會緊跟著第二個div。