CSS布局 - 三栏布局

CSS布局技术可谓是前端技术中最基础的技术，就是因为基础，所以我认为要更加熟练，深入的去掌握，去梳理。

一、 传统 ---> 浮动实现的三栏布局

采用浮动实现的三栏布局有以下特点及注意事项：

　　· 注意DOM结构的排列顺序。
　　　　因为左右两侧的DOM都是浮动布局，而中间的DOM则是普通的文档流，所以为了规避浏览器正常的页面渲染，即先解析左侧DOM(浮动)，再解析中间的DOM(普通文档流，宽度100%)而导致解析最后的右侧DOM(浮动)时因为宽度的问题，而掉到下一行的情况。
　　· 因为DOM结构顺序实际内容反而最后渲染出来。
　　· 左右两栏高度无法做到100%，除非设置body, html高度为100%。

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            min-width: 320px;
        }

        .left {
            float: left;
            width: 150px;
            height: 100%;
            background: #aaa;
        }

        .right {
            float: right;
            width: 150px;
            height: 100%;
            background: #aaa;
        }

        .main {
            background: #eee;
        }

    </style>
</head>
<body>
    <div class="left">This is Left</div>
    <div class="right">This is Right</div>
    <div class="main">
        This is Main
    </div>

</body>
</html>

二、传统 ---> 定位实现的三栏布局

通过定位实现的三栏布局，其实现方式与浮动相类似，与浮动相比，它具有以下特点：
　　· 无需手动更改DOM结构的顺序
　　· 左右两栏可以实现100%高度，无需手动定高，但只支持IE7+
定位方式也有它的缺点，比如当给中间DOM定义了最小宽度时，左右两栏会盖在中间的DOM上。

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 150px;
            background: #eee;
        }

        .right {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 150px;
            background: #eee;
        }

        .main {
            background: #aaa;
            padding: 0 150px;
            min-width: 300px;

        }

    </style>
</head>
<body>
    <div class="left">This is Left</div>
    <div class="main">
        This is Main
    </div>
     <div class="right">This is Right</div>
</body>

</html>

三、 传说 ---> 圣杯布局

圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一种布局模型概念，在国内最早是由淘宝UED的工程师传播开来。
圣杯布局的特点是：
　　1、三列布局，中间宽度自适应，两边定宽；
　　2、中间栏要在浏览器中优先展示渲染；
　　3、允许任意列的高度最高；
　　4、要求只用一个额外的DIV标签；
　　5、要求用最简单的CSS、最少的HACK语句；
实现圣杯布局的核心技术就是浮动与定位相结合使用。
从最简单的圣杯布局开始着手：

3.1 两栏-左侧定宽

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .wrap {
            padding-left:150px;
            overflow: hidden;
        }

        .main {
            float: left;
            width: 100%;
            height: 500px;
            background: #eee;
        }

        .left {
            float: left;
            position: relative;
            width: 150px;
            height: 500px;
            margin-left: -100%;
            left: -150px;
            _left: 150px;/* 解决IE6下的兼容性问题 */
            background: #aaa;
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="main"></div>
        <div class="left"></div>
    </div>
</body>

</html>

　仔细看代码，我可以得出一个结论，圣杯布局的HTML结构就是一个包裹层(.wrap)，然后里面是我们所要放的结构：左侧栏(.left) 和 主栏(.main) 。为了能让主栏优先解析渲染，所以将其HTML结构放在最前面。

　在CSS上，结构相关的HTML标记都要进行浮动，使他们进行一行并排开来，但由于主栏的宽度已经是最外包裹层最大的宽度（去除padding），所以左侧栏会掉到第二行，因此需要为其设置:

margin-left:-100%
position:relative;
left:-150px;

通过margin负值浏览器会将侧栏从第二行拉向第一行，而这里的-100%，指的就是侧栏所在父容器的宽度，所以最终侧栏会被拉向父容器第一行的最左侧。接着再进行相对定位（不会脱离文档流），最后通过左侧偏移值(left)将其拉回到浏览器的最左边。

3.2 两栏-右侧定宽

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .wrap {
            padding-right: 150px;
            overflow: hidden;
        }

        .main {
            float: left;
            width: 100%;
            height: 500px;
            background: #eee;
        }

        .right {
            float: right;
            position: relative;
            width: 150px;
            height: 500px;
            margin-right: -150px;
            _left: -150px;/* 解决IE6下的兼容性问题 */
            background: #aaa;
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>

</html>　

左侧定宽与右侧定宽最大的不同就是右侧栏可以有浮动，然后设置margin-right:-150px便可以实现。
为什么可以这么做呢？其实很简单因为我们的包裹成(.wrap)设置了右间距，而当我们的右侧栏向右偏移了150px时，便已经脱离了.wrap包裹层。相当于脱离了BFC的环境，此时右侧栏由于浮动便会自动上浮。

3.3 圣杯布局 - 侧边栏都在左边 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .wrap {
            padding-left: 300px;
            overflow: hidden;
        }

        .main {
            float: left;
            width: 100%;
            height: 500px;
            background: #eee;
        }

        .left {
            float: left;
            position: relative;
            width: 150px;
            height: 500px;
            margin-left: -100%;
            left: -300px;
            _left: 0px; /* 解决IE6下的兼容性问题 */
            background: red;
        }

        .right {
            float: left;
            position: relative;
            width: 150px;
            height: 500px;
            margin-left: -100%;
            left: -150px;
            _left: 150px;/* 解决IE6下的兼容性问题 */
            background: green;
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

3.4 圣杯布局-侧边栏都在右边

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .wrap {
            padding-right: 300px;
            overflow: hidden;
        }

        .main {
            float: left;
            width: 100%;
            height: 500px;
            background: #eee;
        }

        .left {
            float: left;
            position: relative;
            width: 150px;
            height: 500px;
            margin-left: -150px;
            right: -150px;
            /* 解决IE6下的兼容性问题 */
            background: red;
        }

        .right {
            float: left;
            position: relative;
            width: 150px;
            height: 500px;
            margin-left: -150px;
            right: -300px;
            background: green;
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

3.5 圣杯布局-两侧定宽

由以上的基础认识后，我们就可以很容易的写出两栏定宽，共计3栏的“圣杯布局”。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0
        }

        .wrap {
            padding: 0 150px;
            overflow: hidden
        }

        .main {
            float: left;
            width: 100%;
            height: 500px;
            background: #eee;
        }

        .left {
            float: left;
            position: relative;
            width: 150px;
            height: 500px;
            background: #aaa;
            margin-left: -100%;
            left: -150px;
        }

        .right {
            float: right;
            width: 150px;
            height: 500px;
            background: #aaa;
            margin-right: -150px;
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

四、传说 --> 双飞翼布局

双飞翼布局实际上是对圣杯布局的改进版，相比于圣杯布局，它减少了相对定位，控制偏移值等CSS控制，而相应的双飞翼布局也则增加了html结构。
双飞翼的核心思路就是为主栏增加一个包裹成，然后让这个包裹成与左右两个侧栏同时进行浮动，最后通过设置与圣杯布局相似的负边距值(margin)，便可以实现三栏布局，从而实现不需要定位进行辅助。
详细代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0
        }

        .wrap {
            overflow: hidden;
        }

        .box {
            float: left;
            width: 100%;
            background: #eee;
        }

        .main {
            height: 500px;
            margin: 0 160px;
        }

        .left {
            float: left;
            height: 500px;
            background: #aaa;
            width: 160px;
            margin-left: -100%
        }

        .right {
            float: left;
            height: 500px;
            width: 160px;
            background: #bbb;
            margin-left: -160px;
        }

    </style>
</head>

<body>
    <div class="wrap">
        <!-- 为主栏再包裹一层 -->
        <div class="box">
            <div class="main"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

五、 新时代 ---> Flex布局

Flex 布局是CSS3推出的一种可塑布局方案，其功能强大且灵活。

flex盒子默认情况下会将其内部的子元素按照HTML结构的顺序并排一行来排列展示。如果所有子元素的宽度之和大于当前的flex盒子的宽度时，flex盒子会自动调整每个子盒子的宽度。
也是利用这个特性，我们可以很方便的实现通过Flex进行的三列布局。

PS：Flex 再PC端上只有IE10+ Chrome21+ Firefox 22+ 才被支持，但是在手机端上目前基本已经可以被全部支持

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0
        }

        .wrap {
            display: flex;
        }

        .main {
            width:100%;
            height: 400px;
            background: #eee;
            order:2;
        }

        .left {
            width: 150px;
            height: 400px;
            background: #aaa;
            order:1;
        }

        .right {
            width: 150px;
            height: 400px;
            background: #ddd;
            order:3;
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

说明：order 是CSS3的一个新属性，其值为整数值，用于设置flex子元素的排列顺序，值越小的子元素越排在前面。