三列布局：两边定宽，中间自适应！
看到这个问题，我第一眼想的就是两边定宽float左右，中间加一个margin宽度自适应或者直接设一个overflow：hidden触发bfc机制，这样也可以，看上去也没什么问题，但是html中div的顺序却是
<div class = "left"></div>
<div class = "right"></div>
<div class = "main"></div>
（就用class名字来代表它的位置）通常我们的主体内容是放在main里面的，但是在html的顺序中确是最后加载，因为如果最先加载main，main占据整行下面的left，right就不会自己浮动上去，所以这样肯定是不完美的！
所以接下来我们介绍的两种方式就是完美的实现这种布局，让main最先加载，而且完美的解决兼容性问题。
第一种叫做圣杯布局：
思路是main left right全部float：left，这样，main就会不再具有块级元素的特性main的宽度设置100%同时，此时给left设置一个margin-left：-100%，给right设置一个margin-right：-它自身的宽度，这样我们就硬性的把它们放到了一行上，但是实际上此时left和right是覆盖在了main的两边，这样肯定是不行的！因为会遮盖一些我门想要展示的东西！所以我们还需要做一些事情。这里有两种方法第一种是将main的box-sizing变成border-box，然后直接给main设置padding，padding-left和padding-right分别是两边定宽元素的宽度，我们做的首先是改变盒模型这样加padding后不会改变自己在浏览器中占的位置，然后在设置padding就可以了，但是box-sizing这个属性是css3的属性，所以兼容性没有那么好，如果你对兼容性的要求没有那么高，这是一种很好的选择！如果你对兼容性要求比较严格，那么就需要用到我们的第二种方法：首先我们得我们的 main left right加一个父盒子，为父盒子设置padding，然后再为left right分别设置为相对定位，然后设置一个margin的负值就达到了目的！这样是不是豁然开朗，原理其实很简单，下面是我们的css代码：
.box{
padding: 0 200px;
}
.middle{
width: 100%;
background: pink;
height: 200px;
float: left;
}
.left{
float: left;
width: 200px;
height: 200px;
background: skyblue;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
float: left;
width: 200px;
height: 200px;
background: skyblue;
margin-left: -200px;
position: relative;
right: -200px;
}
html：
<div class = "box">
<div class = "middle">11</div>
<div class = "left"></div>
<div class = "right"></div>
</div>
我把设置box-sizing的代码也放在这儿，大家可以参考！
*{
box-sizing: border-box;
}
.middle{
width: 100%;
background: pink;
height: 200px;
float: left;
padding: 0 200px;
}
.left{
float: left;
width: 200px;
height: 200px;
background: skyblue;
margin-left: -100%;
}
.right{
float: left;
width: 200px;
height: 200px;
background: skyblue;
margin-left: -200px;
}
下面是我们要说的第二种方式：双飞翼布局（名字都不是我起的）
如果你好好看过上一种布局的原理，这个理解起来就很快了！它首先也需要把main left right硬性的放在同一行，不过是换了一种让main内容全部显示的方法，方法就是在main的内部，加一个div，这个div设置一个margin，left rigth的值分别是margin-left和margin-right的值！这样真正要显示的内容实际放在middle>div里！是不是很好理解。
两个原理都明白了之后，双飞翼和圣杯的区别也显而易见！他们都可以完美的实现布局，解决兼容性的问题，但是双飞翼所需的代码明显比圣杯的少，而且思路更加简单一点，所有略胜一筹，实际上双飞翼就是圣杯的优化！青出于蓝而胜于蓝是很正常的事情！
下面是双飞翼布局的代码！大家参考一下
css：
.middle{
width: 100%;
height: 200px;
float: left;
background: skyblue;
}
.middle>div{
margin:0 100px;
}
.left{
width: 100px;
float:left;
height: 200px;
background: pink;
margin-left: -100%;
}
.right{
margin-left:-100px;
width: 100px;
float:left;
height: 200px;
background: pink;
}
html
<div class = "middle">
<div></div>
</div>
<div class = "left"></div>
<div class = "right"></div>
最终效果图！二者是一样的
手打博客，转发要注明噢！