圣杯布局和双飞翼布局圣杯布局和双飞翼布局解决的问题都是两边固定宽度，中间自适应的三栏布局，中间栏放在文档流前面以优先渲染

作用：

圣杯布局和双飞翼布局解决的问题都是两边固定宽度，中间自适应的三栏布局，中间栏放在文档流前面以优先渲染。

圣杯布局代码

<body>
    <div class="main">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
<style>
    .main{
        height:100px;
        padding:0 100px 0 150px;
    }
    .middle{
        float:left;
        width:100%;
        height:100px;
        background:red;
    }
    .left{
        float:left;
        width:150px;
        height:100px;
        margin-left:-100%;
        background:blue;
        position:relative;
        left:-150px;
    }
    .right{
        float:left;
        width:100px;
        height:100px;
        margin-left:-100px;
        background:yellow;
        position:relative;
        right:-100px;
    }
</style>

双飞翼布局代码

<body>
  <div class="middle">
      <div class="inside">inside</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</body>
<style>
    .middle{
        float:left;
        width:100%;
        height:100px;
        background:red;
    }
    .inside{
        margin-left:150px;
        margin-right:100px;		
        height:100px;
    }
    .left{
        float:left;
        width:150px;
        height:100px;
        margin-left:-100%;
        background:blue;
    }
    .right{
        float:left;
        width:100px;
        height:100px;
        margin-left:-100px;
        background:yellow;
    }
</style>

区别

圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding,将左右两个div用相对布局position:relative并分别配合left和right属性，当middle部分的宽小于left部分时会发生布局混乱。

双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。