三栏式布局

1.特殊的三栏式布局：

两边盒子固定宽度，中间盒子自适应

（1）先写出需要布局的三个块；左、中、右。

<div class="wrap">
	<div class="left"></div>
    <div class="main">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
    <div class="right"></div>
</div>

（2）给左右两边的盒子设置宽度，并且让它绝对定位在左边和右边。

.wrap{position:relative;}
.left{width:200px; background-color:blue; height:300px; position:absolute; left:0; top:0;}
.right{width:250px; background-color:green;height:300px; position:absolute; right:0; top:0;}

（3）最后给中间的盒子相应的左右margin，让它的宽度自适应就行。

.main{background-color:red; color:#fff;height:300px; margin:0 250px 0 200px;}

2.圣杯布局

（1）先写出需要布局的三个块；左、中、右。然后给它们分别左浮动。(!注意清除浮动)

<div class="wrap">
	<div class="main">写点文字写点文字写点文字写点文字写点文字写点文字点文字写点文字写点文字写点文字写点文字写点文字写点文字写点文字</div>
	<div class="left"></div>
        <div class="right"></div>
</div>

.main{float:left;}
.left{float:left;}
.right{float:left;}

（2）然后设置中间元素的宽度100%（ ！注意中间元素必须为第一个渲染）

.main{width:100%;background-color:red; color:#fff;height:300px; float:left;}

（3）接下来用margin-left的负值将左右两边盒子拉上去和中间盒子在同一行。

.left{width:200px; background-color:blue; height:300px; float:left; margin-left:-100%; }
.right{width:250px; background-color:green;height:300px; float:left; margin-left:-250px; }

（4）然后再利用父元素的左右padding为左右两边的盒子留下位置。

.wrap{width:90%; background-color:#ccc; margin:0 auto; padding:0 250px 0 200px; box-sizing:border-box; }

  (5)利用相对定位移动左右元素到正确的位置。

.left{width:200px; background-color:blue; height:300px; float:left; margin-left:-100%; position:relative; left:-200px;}
.right{width:250px; background-color:green;height:300px; float:left; margin-left:-250px; position:relative; right:-250px;}

（6）给父元素清除浮动。

.wrap{width:90%; background-color:#ccc; margin:0 auto; padding:0 250px 0 200px; box-sizing:border-box; overflow:hidden;} 

3.双飞翼布局

（1）先写出需要布局的三个块；左、中、右。然后给它们分别左浮动。(!注意清除浮动)

<div class="wrap">
	<div class="main">写点文字写点文字写点文字写点文字写点文字写点文字点文字写点文字写点文字写点文字写点文字写点文字写点文字写点文字</div>
	<div class="left"></div>
        <div class="right"></div>
</div>

.main{float:left;}
.left{float:left;}
.right{float:left;}

（2）然后设置中间元素的宽度100%（ ！注意中间元素必须为第一个渲染）

.main{width:100%;background-color:red; color:#fff;height:300px; float:left;}

（3）接下来用margin-left的负值将左右两边盒子拉上去和中间盒子在同一行。

.left{width:200px; background-color:blue; height:300px; float:left; margin-left:-100%;}
.right{width:250px; background-color:green;height:300px; float:left; margin-left:-250px;}

（4）然后给中间元素设置子元素div，并给它左右margin为左右盒子留位置。

<div class="main"><div>写点文字写点文字写点文字写点文字写点文字写点文字点文字写点文字写点文字写点文字写点文字写点文字写点文字写点文字</div></div>

.main>div{margin:0 250px 0 200px;}

(5）给父元素清除浮动。

.wrap{background-color:#ccc; margin:0 auto;overflow:hidden;}