三栏布局：圣杯布局、双飞翼布局、CSS3布局、绝对定位法、flex布局

圣杯布局和双飞翼布局的目的，都是左右两栏固定宽度，中间部分自适应。
示例目标：左200px，右100px，中间自适应，三部分高度一致。

双飞翼布局

布局思路：中间是身体，两边是翅膀，先把重要的身体部分放好，然后再将翅膀移动到适当的地方。

1. html代码中，中间部分放前面，然后是左边、右边。
2. 将三部分都float:left
3. 中间部分，width:100%
4. main占满了，左边部分margin-left: -100%，右边margin-left: -100px
5. 中间部分的左右被左边部分和右边部分覆盖了，在中间增加个内层，设置margin：0 100px 0 200px

圣杯布局

对应上方双飞翼布局：

1. 相同
2. float: left相同，加上position: relative
3. 相同
4. 相同
5. 中间部分加padding: 0 100px 0 200px，左右再处理。

CSS3布局

1. 左中右按顺序放在html中，float: left，
2. 中间 width: calc(100% - 400px)