在div 块级元素中，一般我们的div块都是流式的，如果你设定一个div，接下来的div就会另起行，也就是块级元素的定义
但是一般排版不是这样的，最典型的应该就是这种布局了，那么中间的那三个div块，就是float的效果了
首先一个简单的例子
这个就是典型的div块分布（有三个div）
然后如果在float2加上float:left的话，效果就会变成下面这样
float使你设置的元素脱离了父级元素（本来这里float2是最大的div的子级元素）
float的属性有left,right,none;
那么就可以解决上面第一张图中间的布局，但是这里还有一个问题，就是下面的注脚，
如果直接div不设置任何东西的话，而中间的三个div都设置float:left的话，结果就是这样
那个黄色的注脚隐藏在三个div后面
这就是前面说的float使得前面三个div脱离父级元素，因此footer成为banner后面的块级元素，
这时，如果想清除float对div的影响，可以用clear：both;（也可以单独设一个div，设定属性clear:both就可以清除影响）
这时就完成了第一张图片的布局
注意，如果只是设置一个div的float的话，接下来的div会环绕着这个设置了float的div，如下图
最后，贴个第一张图的样式代码
body{
background:#2286c6;
margin:0px;
padding:0px;
font-size:12px;
font-family:Arial;
}
#container{
margin:0px auto;
width:780px;
height:600px;
text-alignment:left;
background:#123456;
}
#banner{
margin:0px;
padding:0px;
background:#778899;
height:150px;
width:100%;
}
#globlink{
margin:0px;
padding:0px;
background:#567;
height:50px;
width:100%;
}
#left{
width:200px;
height:370px;
background:red;
margin:0px;
padding:0px 0px 5px 0px ;
color:#d8ecff;
float:left;
}
#middle{
width:400px;
height:370px;
background:blue;
margin:0px 2px ;
padding:0px 0px 5px 0px ;
color:#d8ecff;
float:left;
}
#right{
width:176px;
height:370px;
background:pink;
margin:0px ;
padding:0px 0px 5px 0px ;
color:#d8ecff;
float:left;
}
#footer{
width:100%;
height:30px;
background:yellow;
margin:1px 0px 0px 0px ;
padding:1px 0px ;
color:#d8ecff;
clear:both;
}