【布局】圣杯布局&双飞翼布局

背景

随着前端技术的发展推动，web端的布局方式已基本成熟，那么在网站布局方式中，三列布局最为经常使用，布局方式也有不少，渐渐的开发者们开始从效率的角度优化本身的代码
“若是三排布局能将中间的模块放在dom树前面，那么浏览器在作重绘的时候不久有限显示了吗？”
机制的开发者们开始围绕者这个方向进行了dom的优化，因而诞生了两种著名的布局方式，圣杯布局和双飞翼布局

直奔主题

两种布局的背景就不讲了，直接上代码

圣杯布局

【JsFiddle】
https://jsfiddle.net/zwwill/px57xzp4/

<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">main</div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>

.container {width: 500px; margin: 50px auto;}
.wrapper {padding: 0 100px 0 100px;}
.col {position: relative; float: left;}
.header,.footer {height: 50px;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}

双飞翼布局

ps:
“这不是同样的图嘛？”
“对！就是同样的，由于是解决同一种问题的嘛。”

【JsFiddle】
https://jsfiddle.net/zwwill/5xjyeu9d/

<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">
            <div class="main-wrap">main</div>
        </div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>

.col {float: left;}
.header {height: 50px;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
.footer {height: 50px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}

差异

通俗点讲就是

圣杯布局像是，杯子（wrapper）挂上两只“耳朵”（left，right），全部容量都给了杯身（main），耳朵只能挂在两侧。
双飞翼布局像是，鸟（wrapper）的双翼（left，right），身子（main）是鸟的一大部分，双翼也是身体的一部分。

虽然比较抽象，但有助于对两种布局的区分。实在看不懂就就代码吧，本人“扯”的功力不太够。

其余布局

其余布局方案已经整理到此文中，欢迎你们前往指正

【整理】CSS布局方案