经典三栏布局(圣杯布局或双飞翼布局)

        圣杯布局：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右padding，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开

.container {
  background-color: #ddd;
  padding: 0 200px;
  font-size: 40px;
  overflow: hidden;
 }

.left {
    position: relative;
    width: 200px;
    height: 200px;
    margin-left: -100%;
    right: 200px;
    background-color: tomato;
}

.right {
    width: 200px;
    height: 200px;
    margin-right: -200px;
    background-color: thistle;
}

.center {
    width: 100%;
    height: 200px;
    background-color: turquoise;
}
.fl {
	float: left;
}

<div class="container clearfix">
     <div class="center fl">中间盒子</div>
     <div class="left fl">左</div>
     <div class="right fl">右</div>
</div>

• 优点：不需要添加dom节点

• 缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，当middle部分的宽小于left部分时就会发生布局混乱。

        双飞翼布局：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置margin,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开

body {
    font-size: 40px;
    min-width: 500px;
    background-color: #ddd;
}
.fl {
	float: left;
}
.left {
    width: 200px;
    height: 200px;
    background-color: tomato;
    margin-left: -100%;
}

.right {
    width: 200px;
    height: 200px;
    background-color: thistle;
    margin-left: -200px;
}

.center {
    width: 100%;
    height: 200px;
    background-color: turquoise;
}
.c-inner {
	margin: 0 200px;
}

<div class="fl center" >
	<div class="c-inner">中间盒子</div>
</div>
<div class="fl left" >左</div>
<div class="fl right" >右</div>

• 优点：不会像圣杯布局那样变形，CSS样式代码更简洁

• 缺点：多加了一层dom节点