关于float和position

 

在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;
 }