三栏布局的七种实现方法

作为前端工程师必会的三栏布局的七种实现方法。本人新手，如有错误谢谢指出，希望大家多多关注，评论

1、绝对定位布局：position + margin
html结构：

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="main">Main</div>
</div>

css样式：

 body,html{
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
/*左右进行绝对定位*/
.left,.right{
    position: absolute;
    height:100%;  
    top: 0;
    background: #ff69b4;
}
.left{
    left: 0;
    width: 100px;
}
.right{
    right: 0;
    width: 200px;
}
/*中间用margin空出左右元素所占的空间*/
.main{
    height:100%; 
    margin: 0 100px 0 200px ;
    background: #659;
}

缺点: 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

2、浮动布局： float + margin
html结构：

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="main">Main</div>
</div>

css样式：

    body,html{
        height: 100%;
        padding:0;
        margin: 0;
    }
    /*左边栏左浮动*/
    .left{
        float:left;
        height:100%;
        width:100px;
        background:#ff69b4;
    }
    /*中间栏自适应*/
    .main{
        height:100%;
        margin:0 200px 0 100px;
        background: #659;
    }
    /*右边栏右浮动*/
    .right{
        float:right;
        height:100%;
        width:200px;
        background:#ff69b4;
    }

3、flex布局
html结构：

<div class="container">
    <div class="left"></div>
    <div class="main">center</div>
    <div class="right">right</div>
</div>

css样式：

 .container{
        display: flex;
    }
    .left{
        width:200px;
        background: red;
    }
    .main{
        flex: 1;
        background: blue;
    }
    .right{
        width:200px;
        background: red;
    }

这种布局方式，高度由内容决定。

4、table布局
html结构:

<div class="container">
    <div class="left">left</div>
    <div class="main">center</div>
    <div class="right">right</div>
</div>

css样式：

     .container{
        display: table;
        width:100%;
    }
    .container>div{
        display: table-cell;
    }
    .left{
        width: 100px;
        background: red;
    }
    .main{
        background: blue;
    }
    .right{
        width: 200px;
        background: red;
    }

高度由内容决定。

5、Grid网格布局
html结构：

<div class="container">
    <div class="left">left</div>
    <div class="main">center</div>
    <div class="right">right</div>
</div>

css样式：

    .container{
        display: grid;
        width: 100%;
        grid-template-rows: 100px;  /*设置行高*/
        grid-template-columns: 100px auto 200px;  /*设置列数属性*/
    }
    .left{
        background: red;
    }
    .main{
        background: blue;
    }
    .right{
        background:red;
    }

6、圣杯布局
html结构：

<div class="container">
    <div class="main col">Main</div>
    <div class="left col">Left</div>
    <div class="right col">Right</div>
</div>

css样式：

    /* 两边定宽，中间自适用 */
    body,html,.container{
        height: 100%;
        padding:0;
        margin: 0;
    }
    .col{
        float: left;   /* 三个col都设置float: left,为了把left和right定位到左右部分 */
        position:relative;
    }
     /*父元素空出左右栏位子: 因为上一步中，左右栏定位成功了，但是中间栏的内容会被遮盖住*/
    .container{
        padding:0 200px 0 100px;
    }
    /*左边栏*/
    .left{
        left:-100px;
        width: 100px;
        height:100%;
        margin-left: -100%;
        background: #ff69b4;
    }
    /*中间栏*/
    .main{
        width:100%;
        height: 100%;
        background: #659;
    }
    /*右边栏*/
    .right{
        right:-200px;
        width:200px;
        height:100%;
        margin-left: -200px;
        background: #ff69b4;
    }

总结：圣杯布局用到了浮动float、负边距、相对定位relative，不添加额外标签

7、双飞翼布局
html结构：

<div class="container">
    <div class="main col ">
        <div class="main_inner">Main</div>
    </div>
    <div class="left col ">Left</div>
    <div class="right col ">Right</div>
</div>

css样式：

    body,html,.container{
        height: 100%;
        padding:0;
        margin: 0;
    }
    .col{ 
        float: left; /* 把left和right定位到左右部分 */
    }
    .main{ 
        width:100%;
        height:100%;
        background: #659;
    }
    .main_inner{   /* 处理中间栏的内容被遮盖问题 */
        margin:0 200px 0 100px;
    }
    .left{
        width: 100px;
        height: 100%;
        margin-left: -100%;
        background: #ff69b4;
    }
    .right{
        height:100%;
        width:200px;
        margin-left: -200px;
        background: #ff69b4;
    }

双飞翼布局的好处：

（1）主要的内容先加载的优化。
（2）兼容目前所有的主流浏览器，包括IE6在内。
（3）实现不同的布局方式，可以通过调整相关CSS属性即可实现。
8、对比圣杯布局和双飞翼布局：
（1）都是左右栏定宽，中间栏自适应的三栏布局，中间栏都放到文档流前面，保证先行渲染。
（2）解决方案基本相似：都是三栏全部设置左浮动float：left,然后分别结局中间栏内容被覆盖的问题。
(3)解决中间栏内容被覆盖问题时，圣杯魔兽1设置父元素的padding，双飞翼布局在中间栏嵌套一个div，内容放到新的div中，并设置margin，实际上，双飞翼布局就是圣杯布局的改进方案。