两/三栏布局（圣杯双飞翼）

常用的页面布局

两栏布局、三栏（圣杯、双飞翼）布局

1、两栏布局：（左边定宽，右边自适应）

	//html
	<div id="left"> 左边定宽</div>	
	<div id="right"> 右边自适应</div>

(1)、左边左浮动，右边加overflow:hidden;变成BFC清除左侧浮动元素的影响

	#left {
		float:left;
		width:200px;
		background:green;
	}
	#right {
		overflow:hidden;
		background:red;
	}

2、三栏布局，圣杯布局，双飞翼布局

为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）
(1)、圣杯布局

	// html
	<div id="header"></div>
	<div id="container">
		<div id="center" class="column"></div>
		<div id="left" class="column"></div>
		<div id="right" class="column"></div>
	</div>
	<div id="footer"></div>

主体部分是由container包裹的center,left,right三列，其中center定义在最前面

（1）、假设左侧固定宽度为200px,右侧的固定宽度为150px,则首先在container上设置，为左右两列预留出相应的空间
（2）、分别为三列设置宽度与浮动，同时对footer设置清除浮动
	（由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被”挤“到了第二行）
（3）、将left放置到之前预留出的位置上，这里使用负外边距
（4）、使用position方法（position:relation和right:200px将left的位置在原有基础左移200px,以完成left的放置）
（5）、接下来放置right,只需添加一条声明即可
#right {
		width:150px;
		margin-right:-150px;
		
}
	至此，布局效果完成。不过还需要考虑最后一步，那就是页面的最小宽度：要想保			   
	证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小
	的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: 
	relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小
	宽度应该设置为200+150+200=550px：

body {
  min-width: 550px;
}

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

#footer {
  clear: both;
}

双飞翼布局

//html
<div id="container" class="column">
	<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>

	// css样式
	// 现在的样式结构为左右两边预留的间距,中间为center,下面左边为left,右边为right
	
#container {
  width: 100%;
}
.column {
  float: left;
}
#center {
  margin-left: 200px;
  margin-right: 150px;
}
#left {
  width: 200px; 
}
#right {
  width: 150px; 
}

将left放置到预留位置

#left {
  width: 200px; 
  margin-left: -100%;
}

将right放置预留位置

#right {
  width: 150px; 
  margin-left: -150px;
}