css float佈局,CSS float 浮动 | CSS 布局 - 简明教程

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

如果说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;

}

头部

侧边拦

内容

尾部

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

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

效果

头部

侧边拦

内容

尾部

定位布局

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

头部

侧边拦

内容

尾部