CSS布局之流体浮动布局

在CSS布局中经常使用的布局方式大值分为以下四种：

1、流体浮动布局 2、流体定位布局 3、固定浮动布局
4、固定定位布局

下面首先说下流体浮动布局;

假如我们要实现如下的布局情况：



则应该可以考虑采用流体浮动布局，其中CSS的样式如下：

#header{
border:2px solid black;
height:80px;
background:#ccc;
line-height:60px;
margin-bottom:10px;
}

#header h1{
font-size:18px;
text-align:center;
line-height:80px;
}

#nav{
border:2px solid black;
height:300px;
width:25%;
float:left;
margin-bottom:10px;
}

#nav ul{
list-style-type:none;
text-align:center;
line-height:200%;
/*
width:50px;
margin:0 auto;
*/
}

#main{
border:2px solid black;
width:46%;
height:300px;
margin-bottom:10px;
margin-left:27%;
}

#main p{
text-indent:30px;
padding-left:10px;
letter-spacing:2px;
line-height:200%;
}

#navr{
border:2px solid black;
width:25%;
height:300px;
margin-bottom:10px;
float:right;
}

#navr ul{
list-style-type:none;
line-height:200%;
text-align:center;
}

#footer{
border:2px solid black;
height:60px;
clear:both;
}

#footer p{
text-align:center;
}

在代码中使用上述CSS的样式即可实现上述要求。