CSS圣杯和双飞翼布局

圣杯布局参考http://blog.csdn.net/sunshine_zcc/article/details/51622599

利用flex脱离文档流，利用padding预留出位置，利用margin-left实现布局，利用position和left/right填充位置，好处是：优先渲染主要dom, main部分是自适应宽度的，很容易在定宽布局和流体布局中切换等。

双飞翼布局：https://www.cnblogs.com/hl-520/p/5754111.html

利用flex脱离文档流，在maincontext外层再包裹一个div，即maincontent外层两层div,leftcontent一层，rightcontent一层，利用flex脱离正常文档流，不需要padding预留出位置，也不需要用position和left/right填充位置，利用margin-left实现布局，maincontent的最外层div打底，内层div设置margin-left和margin-right即可。

双飞翼的好处：除了圣杯的好处之外，还使得，让Main变成BFC元素了，屏幕宽度缩小Main也不会被挤下去，圣杯布局就会被挤下去。红色剪头两部分对比，方便加三栏之间的padding。