两栏布局,左边定宽，右边自适应

左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响

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

三栏布局(圣杯布局、双飞翼布局)

圣杯布局和双飞翼布局都是用来做三栏布局的，左右定宽，中间自适应

圣杯布局

原理:

为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div

dom结构

<div id="container">
  // 把center放在最前面,假如网卡的时候最先加载的是中间的,突出中间的
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>

css样式

#container { 
  // 把左右两边的内容用padding撑出来
  padding-left: 200px; 
  padding-right: 150px;
}

// 现在的样式结构为 左右两边为空白,中间上边是center,下面左边是left,右边是right #container .column { 
  float: left;
}
#center { 
  width: 100%;
}
#left { 
  width: 200px; 
}
#right { 
  width: 150px; 
}

将left放置到之前预留出的位置上，这里使用负外边距

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

随后还需要使用定位(position)方法：

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

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

案例可参考: 圣杯布局

双飞翼布局

dom结构

<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;
}