圣杯布局和双飞翼布局

前言

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局（中间栏放在文档流前面优先渲染！）

区别

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的：
也就是三栏全部浮动，但左右两栏加上负margin让其跟中间栏div并排。

不同在于解决 “中间栏div内容不被遮挡” 问题的思路不一样。

圣杯布局

image.png

  
    
    
    
  
  
    

      
main
      
left
      
right
    
  

双飞翼布局

中间的 div 外层用另一个 div 包裹了一下，然后利用 margin 来把嵌套的 div “挤”到中间

    
    
    


 
　   

    　　 
main
 
       
　　
left
 
　　
right
 

ps：其实还有其它方法解决 “中间栏div内容不被遮挡” 问题，见下面关键点2！！！

  
    
    
    
  
  
    

      
main
      
left
      
right
    
  

Flex布局

    
    
    


 
　　
main
 
　　
left
 
　　
right
 

关键点：左右定宽用 flex-basis!!!