在网页中，使用浮动元素的时候，会影响后面相邻的固定元素，由于不同的浏览器对浮动属性的解释存在差异，所以需要对某些元素的浮动属性进行清除，
清除浮动属性时，使用的属性是清除浮动属性(clear).
1. 清除浮动属性(clear)
用来清除相邻元素的浮动属性，在清除浮动属性clear时中，可以使用4种属性值，分别为none, left, right和both，
clear: none | left | right | both;
none: 不清除浮动属性
left: 清除元素的左侧浮动属性
right：清除元素的右侧浮动属性
both：清除元素的两侧浮动属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CSS属性 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.float {
float: left;
width: 200px;
height: 100px;
background: #666666;
}
.clear {
clear: left;
float: left;
width: 200px;
height: 100px;
background: #999999;
}
</style>
</head>
<body>
<div class="float">这是一个浮动元素</div>
<div class="clear">这是一个清除浮动属性的元素</div>
</body>
</html> 
第二个元素清除了浮动元素的左侧浮动属性，所以两个元素将换行显示。
2.清除浮动与固定元素
当清除浮动元素的右侧浮动属性的时候，由于固定元素在浮动元素的后面时会同行显示，所以无法显示清除浮动的效果，在实际使用浮动清除属性的时候，常常会忽略
这一点，以致造成布局上的困扰。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.float {
float: left;
width: 200px;
height: 100px;
background: #666666;
}
.clear {
clear: right;
float: left;
width: 200px;
height: 100px;
background: #999999;
}
</style>
</head>
<body>
<div class="clear">这是一个清除浮动属性的元素</div>
<div class="float">这是一个浮动元素</div>
</body>
</html> 
在第二个元素中，定义元素的浮动属性值为左浮动，此时由于右侧元素即使没有浮动属性，依然可以显示在第1个
元素的右侧，所以无法显示清除浮动的效果。