【布局】圣杯布局&双飞翼布局 - HelloWorld开发者社区

背景

随着前端技术的发展推进，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;}