float 浮动作用：改变默认的上下排列关系，实现布局元素的左右排列；

clear清除作用：清除该布局元素前面的排列关系，使得该元素恢复原有默认上下排列关系。

例如：

<style type="text/css">
<!--
#layer1 {

height: 400px;

width: 500px;
}
#layer1 #layer11 {

float: left;

height: 200px;

width: 200px;

background-color: #006666;
}
#layer1 #layer12 {

float: left;

height: 200px;

width: 200px;

background-color: #999999;

text-align: center;
}
#layer1 #layer13 {

float: left;

height: 200px;

width: 100px;

background-color: #CCCCCC;
}
#layer1 #layer14 {

height: 200px;

width: 500px;

clear: both;

background-color: #FF8040;
}
-->
</style>

<div id="layer1">

<div id="layer11">此处显示 id "layer11" 的内容</div>

<div id="layer12">此处显示 id "layer12" 的内容</div>

<div id="layer13">此处显示 id "layer13" 的内容</div>

<div id="layer14">此处显示 id "layer14" 的内容</div>

</div>

说明：

layer11 设置了float:left

layer12设置了float:left

layer13设置了float:left

layer14不想要连接在layer13后面

这时候就需要设置layer14的清除clear: both;

这样，layer14就会在下面一排出现。