三栏布局不设置高度时，每列的高度为内容撑开的高度。优点：快捷、方便的定位方式。缺点：当浏览器宽度缩小到一定程度，会发

左右定宽，中间自适应

绝对定位布局：
不设置高度时，每列的高度为内容撑开的高度。
优点：快捷、方便的定位方式。
缺点：当浏览器宽度缩小到一定程度，会发生重叠。

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

body, html{
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
/*左右绝对定位*/
.left, .right{
    position: absolute;
    height:100%;  
    top: 0;
    background: green;
}
.left{
    left: 0;
    width: 100px;
}
.right{
    right: 0;
    width: 200px;
}
.main{
    height: 100%;
    right: 200px;
    left: 100px;
    background: #f40;
}

浮动布局：
高度随内容撑开
浏览器缩小到一定程度时，不再三栏显示，会根据文档流排列
优点：兼容性好
缺点：需要清除浮动

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

body,html{
    height: 100%;
    padding:0;
    margin: 0;
}
/*左边栏左浮动*/
.left{
    float:left;
    height:100%;
    width:100px;
    background:red;
}
/*右边栏右浮动*/
.right{
    float:right;
    height:100%;
    width:200px;
    background:#ff69b4;
}
/*中间栏自适应*/
.main{
    height:100%;
    /*设置margin可以保证中间内容高于两边时，内容不向左右两边挤*/
    margin:0 200px 0 100px;
    background: #659;
}

flex布局：
css3新特性，每列高度同最高的列等高
浏览器宽度足够小时，依旧保持三栏布局
优点：移动端常见方式
缺点：不兼容IE8及以下

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

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

table布局：
每列等高
浏览器宽度足够小时，依旧保持三栏布局

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

.container{
    display: table;
    width:100%;
}
.container > div{
    /*为每个div设置table-cell*/
    display: table-cell;
}
.left{
    width: 100px;
    background: red;
}
.main{
    background: blue;
}
.right{
    width: 200px;
    background: red;
}

Grid网格布局：
Grid是一个强大的二维布局工具，能够以行和列来进行布局

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

.container{
    display: grid;
    width: 100%;
    /*设置行高时，内容多会超出*/
    /*不设行高时，列等高*/
    grid-template-rows: 100px;  
    grid-template-columns: 100px auto 200px;  /*设置列数属性*/
}

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

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

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

双飞翼布局：
增加了一个div就可以不用相对布局了，只用到浮动和负边距

<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>

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

双飞翼布局的好处：
（1）主要的内容先加载优化。
（2）兼容目前所有的主流浏览器，包括IE6在内。
对比圣杯布局和双飞翼布局：
（1）都是左右栏定宽，中间栏自适应的三栏布局，中间栏都放到文档流前面，保证先行渲染。
（2）都是三栏全部设置左浮动float：left,然后分别解决中间栏内容被覆盖的问题。
（3）解决中间栏内容被覆盖问题时，圣杯布局设置父元素的padding；双飞翼布局在中间栏嵌套一个div，内容放到新的div中，并设置margin。
双飞翼布局就是圣杯布局的改进方案。