CSS3 浮动布局

布局就是定义网页大体功能区块的位置。

如果说table布局是HTML年代的页面布局方式，那么浮动布局就是CSS年代的布局方式，不过随着移动端兴起（我们已经多次提到移动端兴起，它对前端的影响真的很大！！) 浮动布局的方式，渐渐被称之为传统布局。但是还是很常用，可能目前为止，还是被使用得最多的布局方式。

浮动布局

代码

#page {
 width: 500px;
 height: 500px;
}

header {
 background:#FA8072; 
 width:500px; 
 height:100px; 
 float:left;
}

aside {
 background:#FFA07A; 
 width:150px; 
 height:300px; 
 float:left;
}

details {
 background:#FFA500; 
 width:350px; 
 height:300px; 
 float:right;
}

footer {
 background:#FF8C00; 
 width:500px; 
 height:100px; 
 float:left;
}

<div id="page">
 <header>头部</header>
 <aside>侧边拦</aside>
 <details>内容<details/>
 <footer>尾部<footer/>
</div>

float:left左浮动，float:right右浮动。所有的区块设置了大小，都浮动起来，就形成了我们的页面布局。

有时我们会遇到问题，有一些区块没有设置浮动，但也跟着飘了起来。这是受到了上面浮动的影响。使用clear:both可以清除。

效果

定位布局

使用定位的方式进行页面布局，也是得到上面的效果，提供一份代码，有兴趣可以参考，比浮动稍微复杂。

<div style="width:500px; height:500px; position: relative;">
<div style="background:#FA8072; width:500px; height:100px; position:absolute; top:0; left:0; ">头部</div>
<div style="background:#FFA07A; width:150px; height:300px; position:absolute; top:100px; left:0;">侧边拦</div>
<div style="background:#FFA500; width:350px; height: 300px; position:absolute; top:100px; left:150px;">内容</div>
<div style="background:#FF8C00; width:500px; height:100px; position:absolute; top:400px; left:0; ">尾部</div>
</div>