三栏布局(两边固定，中间自适应) 常用方案及演变过程

1. 浮动方式:

实现关键点: 要把中间放在左右块的后面，然后左右设置左右浮动即可。

优点: 简单

缺点: 中间 main 不能清除浮动，宽度较小布局混乱

代码

      
                    
    
    
    
      
     
      
     
      
     
    
    
    
    
  复制代码

2. 绝对定位方式:

实现关键点： 左右绝对定位 中间用 margin 撑开

优点：容易理解和上手

缺点：浏览器宽度较小会出现重叠

代码

      
                    
    
    
    
      
     
      
     
      
     
    
    
    
    
  复制代码

停，要开始讲道理了

生产改进要求

中间栏优先渲染、运行任意列高度最高

陷入沉思

中间栏优先，浮动是挂了，绝对定位还能抢救下，先看看国外提出的圣杯布局和淘宝玉伯的双飞翼布局

圣杯布局

初版

实现要点:

1.子元素都左浮动， 2.设置主体部分宽度为 100% 3.设置左边 margin-left 为-100%让其换到上一行，右边 margin-left 为负本身宽度 4.主容器设置左右 padding 5.设置三部分都为相对定位，将两部分移动到两侧留白，left 和 right 设置为-宽度

缺点：圣杯破碎 当中间块宽度小于左边块时，布局错乱

      
                    
    
    
    
      
     
      
     
      
     
    
    
    
    
  复制代码

绝对定位版

实现要点： 把前面普通版的 main 移到主容器最前即可

缺点：高度不可控，会无法支撑起 wrapper， 宽度较小出现覆盖

双飞翼布局

实现要点：

与圣杯处理不同之处在于中间被遮挡内容的处理,在 main 中包裹一个 div 设置左右 margin 来处理

优点： 比原始圣杯布局写法要简单，解决了圣杯破碎和绝对定位高度支撑问题

缺点： 增加了一个 div，增加了渲染成本

允许任意列最高

代码

      
                    
    
    
    
      
     
        
      
        
      
      
     
      
     
      
     
    
    
    
    
  复制代码

flex 版

实现要点：利用 flex 的 order 属性移动

优点: 集双飞翼的优点一身，还要简单的多

缺点：兼容性！ 兼容性！ 兼容性！

代码

      
                    
    
    
    
      
     
      
     
      
     
      
     
    
    
    
    
  复制代码

总结

我习惯了对一个问题的发展过程进行了解，发掘每部分解决方案的优点和缺点，当然，文章是有意编排了顺序，是想大家有了一个从不完善的版本到完善版本过渡，也不能说拿到最大的锤子，就是干，程序员要做的就是在当前状况选择一个合适的方案。

想要点小星星

学习前端已经半年有余了，css方面能够认识到张鑫旭大佬，js方面有<<你不知道的JavaScript>>这位良师，还有阮一峰大佬的ES6，让我了解到前端的宿命就是精通html、css、js三门语言，任重而道远，在读了张大大的文章后有感，平时遇到问题，自己去尝试，主动犯错，了解不一样的深度，然后把知识点通过自己的脑子转换一下，重组为自己的东西，更重要的是，我不是一个无私的利他主义者，我还是需要一些鼓励，更有动力输出文章，希望能有一颗呀。

参考文章