上一篇文章三栏布局总结了三栏布局（水平方向）的五种方案，这里对这五种方案做一些延伸，分析一下各个方案的优缺点。

首先，看一下如果中间部分的内容比较长，这五个方案的显示效果是怎么样的。
一目了然，一般来说，方案3和方案4是我们比较想要的效果。

• 方案1：浮动解决方案

  
  微信图片_20181126143749.png

• 方案2：绝对定位解决方案

  
  微信图片_20181126143756.png

• 方案3：flexbox解决方案

  
  微信图片_20181126143800.png

• 方案4：表格布局解决方案

  
  微信图片_20181126143804.png

• 方案5：网格布局解决方案

  
  微信图片_20181126143812.png

分析

• 方案1：浮动解决方案
  缺点：由于浮动会脱离文档流，如果处理不好清除浮动，以及与周边元素的关系，会带来一些样式问题
  优点：兼容性比较好

• 方案2：绝对定位解决方案
  缺点：由于绝对定位会脱离文档流，导致之后的元素的位置需要重新设计，此方案的可使用性比较差
  优点：兼容性比较好

• 方案3：flexbox解决方案
  缺点：兼容性没有浮动和绝对定位好，比如IE8不兼容flex
  优点：flex布局可以弥补浮动布局和绝对定位布局的缺点，是比较好的布局方式

• 方案4：表格布局解决方案
  缺点：对于复杂的布局，相对需要写比较多的代码
  优点：兼容性比较好

• 方案5：网格布局解决方案
  缺点：如果需要实现类似杂志的那种每行中各列长短不一的效果，网格布局就不是很能胜任了
  优点：作为新技术，CSS开始支持网格布局，代码量会相对简化