圣杯布局 VS 双飞翼布局

最近在学习 CSS 布局，看到了这两个经典布局（其实是同一个只是实现方式不同），才发现自己原来对很多 CSS 属性理解的都不够，于是仔细看了这两个布局的实现方式自己动手做了一遍，希望能有更深的理解。

圣杯布局和双飞翼布局都是实现三栏布局的方法，页面整体分为三部分，header、container、footer，其中 container 部分左右定宽，中间自适应，是很常见的布局，效果如下图。

下面分别介绍两种布局的实现原理。

html 代码如下：



  
    
    Layout Demo
    
  
  
    header
    
      main
      left
      right
    
    footer

note：先写 main 部分是因为要先渲染中间部分。

将 main、left、right 部分都设置左浮动,此时由于中间部分脱离了文档流，footer 就会挤上去，因此需要给 container 加上 overflow: hidden;，保证中间部分的空间留出来。

此时 left 和 right 依旧在下一行，为了使 left 和 right 移上去，则需要缩小 main 部分的宽度，通过 container 的 padding 来设置。设置 container 的左右 padding 为 100px，给 left 加上 margin-left： -100%使其上移一行。

同理，将 right 部分上移

  margin-left: -100px;
  position: relative;
  right: -100px;

双飞翼布局和圣杯布局在实现思路上大致相同，区别是双飞翼布局在 main 部分外面多了一层 div，利用父层 div 的 margin 值取代了圣杯布局中 container 的 padding，

给 main 部分加一个内层 div，三部分（main、left、right）都设置 float: left;， main 部分 width: 100%;， left 和 right 定宽

html 结构如下：



  
    
    Layout Demo
    
  
  
    header
    
      
        main
      
      left
      right
    
    footer

为了使 left 和 right 上移需要缩小 main 的宽度，和圣杯布局不同的是，这里通过设置 inner-main 的 margin 来留出位置，同样使用负 margin 来使得 left 和 right 上移（这里不需要使用相对定位）

通过上面两种实现方式可以看出，圣杯布局和双飞翼布局在思路上的区别是：

圣杯布局通过设置主元素的 padding 来为左右栏留出位置，而双飞翼布局是在中间栏增加子元素，通过内层子元素的 margin 来为左右栏留出位置（注意：双飞翼布局中 width 和 float 属性都是设置在外层 div 上的）
圣杯布局中为了使得左右栏分布在最左和最右需要同时使用负 margin 和相对定位实现，而双飞翼布局中不需要使用相对定位

代码示例