圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。有一次面试，要求写出三种实现方式，结果只写出了两种，面试官说基础还不够扎实~呜

圣杯布局

圣杯HTML结构：

    
    
     
      中间的
     
    
     
      左边的
     
    
     
      右边的
     
    

双飞翼布局

双飞翼HTML结构为：

    
    
     
        
      
       中间的
      
    
     
    
     
      左边的
     
    
     
      右边的
     
    

一、float+margin

说明：网上还有人用padding替换margin的方法，感兴趣的自己去查。

二、Position

说明：网上有人提到这个方法在某些情况下会出现bug，具体没有深入了解过。

三、Flex

说明：低版本的浏览器有兼容的问题，在网上也看到有人用order控制位置

四、Grid

说明：grid-column一共分为5个格，“grid-column:1/2”占了第一个和第二个格，不是指占了二分之一。这个方法兼容性有比较大的问题，网上有不少文章提到浏览器还没有提供支持，实际上新版主流浏览器已经支持了。