今天整理一下前端的几种经典布局:

一、上中下一栏式布局

  此类布局是最简单的布局方式,直接排下来就可以了。代码如下:

  

  实现效果:

  

  上面红框里面看到body与页面之间有 一个小缝隙,那是浏览器自带的默认值导致的,直接加一个body{margin:0;} 就可以了。

  效果如下:

   

二、左右两栏式布局

  1、浮动+普通流混合模式

   原理:left向左浮动后,right无需给宽,自动占全部宽度,需加一个margin-left来腾出left的空间。如果父元素宽度不是固定的,那么right可以随着窗口大小的变化而变化。

  html如下:

    <div class="wrap">

    <aside class="left">left</aside>

    <section class="right">right</section>

   </div>

  css如下:

  

    .wrap{width: 80%;margin:0 auto;}

  .left{width:200px;height:100px;float: left; background: #94D3A4;}

  .right{height:100px;background: #8EB6D6;margin-left:200px;}

  效果:

  

  注意:制作过程中right的宽度会占100%的宽,所以需要给right一个margin值,让出位置给left。

   2、纯浮动式

  原理:left和right都浮动,然后给父元素清除浮动即可。

  代码:

  

   <div class="wrap">

    <aside class="left">left</aside>

    <section class="right">right</section>

  </div>

 

  .wrap{width: 80%;margin:0 auto;overflow: hidden;}

.left{width:200px;height:100px;float: left; background: #94D3A4;}

.right{width:500px;height:100px;float:left;background: #8EB6D6;}

 

  效果:

  

   3、绝对定位

    代码:

    <div class="wrap">

    <aside class="left">left</aside>

    <section class="right">right</section>

   </div>

    

    .wrap{width:700px;margin:0 auto; position:relative;}

  .left{width:200px;height:100px; background: #94D3A4;position: absolute;top:0;left:0;}

  .right{width:500px;height:100px;background: #8EB6D6;position: absolute;top:0;right:0;}

    效果:

    

三、左右两栏加页眉页脚

四、左中右三栏

五、左中右三栏加页眉页脚