基本布局
<div id="header">header</div>
<div id="nav">nav</div>
<div id="sidebar">sidebar</div>
<div id="news">news</div>
<div id="about">about</div>
<div id="estate">estate</div>
<div id="footer">footer</div><pre name="code" class="html">样式
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
background:lightyellow;
width:875px; /*限制区块再居中*/
margin:0 auto;
}
#header{
width:875px;
height:323px;
border:solid black;
}
#nav{
width:875px;
height:323;
background:red;
}
#sidebar{
width:251px;
height:490px;
background:#036;
}
#news{
width:313px;
height:300px;
background:#F36;
}
#about{
width:303px;
height:300px;
background:#000;
}
#estate{
width:616px;
height:190px;
background:#096;
}
#footer{
height:110px;
background:#C33;
}
布局颜色大概如上
1,现在给sidebar加上float:left左浮动。
设置后中间变成如上的效果,之所以那样,原来sidebar是div是块级元素,是占据一行的,,设置为左浮动后,,相当于sidebar浮动起来(可以理解为漂浮起来不在原来的布局面板上,在平面上已经不占据空间了),后面的news div就会往上面挤占据空间,news div的内容被挤压到右边,,
2.给news div设置左浮动后如图
因为news设置为左浮动,此时和sidebar在同一水平面(即在浮动层),所以news显示在sidebar)右边,,背景为黑色的about div 由于news div浮动起来,所以占据了原理sidebar 和news 的空间,,在后面看不到,,
3.给about div 设置左浮动后
同理,about div 浮动后和news sidebar在同一层,所以在占据news 和sidebar以为的空间,,而estate和footer占据原来的空间
同理estate div 设置左浮动后占据news ,about,sidebar(浮动层的)空余空间。 footer占据平面层的空间
最后foot设置clear:both,清楚左右浮动,,这样footer就不会占据平面层的空间,不会去挤压