圣杯布局与双飞翼布局的理解和区别，并用代码实现

圣杯布局和双飞翼布局都是三栏布局，左右盒子宽度固定，中间盒子自适应（固比固），区别是他们的实现的思想。 圣杯布局：

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


<div id="footer">#footer</div>
// style
body {
  min-width: 600px; 
}
#container {
  padding-left: 200px;  
  padding-right: 200px; 
}
#container .column {
  height: 200px;
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          
  right: 200px;        
  margin-left: -100%;
}
#right {
  width: 200px;         
  margin-right: -200px;
}
#footer {
  clear: both;
}

/*** IE6 Fix ***/
* html #left {
  left: 200px;
}

圣杯布局的思想是：给内容区设置左右 padding 防止遮挡，将中间的三栏全部 float left，通过 margin 负间距把左右内容区移到上方，再通过 relative + left 和right 的设置，将左右内容区移动到目标位置。

双飞翼布局：

<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
} 
</style>

双飞翼布局：给middle创建子div放置内容，再通过子div设置margin-left right 为左右两栏留出位置，其余与圣杯布局思路一致。

现在也可以使用 flex-box 轻松实现。