CSS三栏布局

三栏布局是前端学习必须了解的东西，重要性不言而喻。这里详细介绍七种三栏布局方案:

绝对布局法

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

.wrap{
    position: relative;
}
.left{
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    background-color: rgba(255, 0, 0, 0.356);
    height: 400px;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    height: 400px;
    background-color: rgba(255, 0, 0, 0.356);
}
.main{
    height: 400px;
    margin: 0 300px;
    background-color: rgb(223, 211, 41);
}

总结：三个div顺序可以任意调整，布局容易理解。

流动布局

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

.left{
    float: left;
    width: 300px;
    height: 400px;
    background-color: rgba(255, 0, 0, 0.356);
}
.right{
    float: right;
    width: 300px;
    height: 400px;
    background-color: rgba(255, 0, 0, 0.356);    
}
.main{
    margin-left: 300px;
    margin-right: 300px;
    height:  400px;
    background-color: rgb(223, 211, 41);
}

总结：主体div放在最后，左右两栏div顺序任意，代码简单，但要避免主体main部分clear样式。

BFC布局

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

.left{
    float: left;
    width: 300px;
    height: 400px;
    background-color:rgba(255, 0, 0, 0.356);    
}
.right{
    float: right;
    width: 300px;
    height: 400px;
    background-color:rgba(255, 0, 0, 0.356);    
}
.main{
    height: 400px;
    overflow: hidden;
    background-color:rgb(223, 211, 41);
}

总结：主体div放在最后，通过 overflow 属性产生BFC, main 内子元素不容易改变整体布局。

圣杯布局

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

.wrap{
    height: 400px;
    padding-left: 300px;
    padding-right: 300px;
}
.main{
    float: left;
    width: 100%;
    background-color: rgb(223, 211, 41);
    height: 400px;
}
.left{
    float: left;
    height: 400px;
    width: 300px;
    margin-left: -100%;
    position: relative;
    left:-300px;
    background-color: rgba(255, 0, 0, 0.356);
}
.right{
    float: left;
    height: 400px;
    width: 300px;
    margin-left: -300px;
    position: relative;
    right: -300px;
    background-color: rgba(255, 0, 0, 0.356);
}

总结：主体div放在最前面，优先渲染主体部分。同时用到了定位。’

双飞燕布局

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

.center{
    float: left;
    width: 100%;
}
.main{
    float: left;
    width: 100%;
    margin-left: 300px;
    margin-right: 300px;
    background-color: rgb(223, 211, 41);
    height: 400px;
}
.left{
    float: left;
    height: 400px;
    width: 300px;
    margin-left: -100%;
    background-color: rgba(255, 0, 0, 0.356);
}
.right{
    float: left;
    height: 400px;
    width: 300px;
    margin-left: -300px;
    background-color: rgba(255, 0, 0, 0.356);
}

总结：同圣杯布局一样，但没有用定位,增加一个div标签

Flex布局

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

.wrap{
    display: flex;
}
.left{
    flex: 0 1 300px;
    background-color: rgba(255, 0, 0, 0.356);
    order: -1;
    height: 400px;
}
.right{
    flex: 0 1 300px;
    background-color: rgba(255, 0, 0, 0.356);
    order: 1;
    height: 400px;
}
.main{
    flex: 1;
    background-color: rgb(223, 211, 41);
    height: 400px;
}

总结：Flex布局具有很多优点，相信未来会广泛使用的。

阮一峰关于Flex的布局教程：
Flex 布局教程：语法篇
Flex 布局教程：实例篇

Grid布局

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

.wrap{
    display: grid;
    grid-template-columns: 300px auto 300px;
    grid-template-rows: 400px;
}
.left{
    background-color: rgba(255, 0, 0, 0.356);
}
.right{
    background-color: rgba(255, 0, 0, 0.356);
}
.main{
    background-color: rgb(223, 211, 41);
}

总结：非常不错。
简书上一篇不错的文章：
Grid布局指南

最后：日后会回来补充详细的。