圣杯布局和双飞翼布局
两边固定宽度，中间内容自适应宽度，是这两个布局的主要作用
这两个布局方式的关键就是利用 负的margin值来进行float元素的定位
其实这两个布局网上的博文介绍的很多，但是我自己研究以后，自己写了一种方式。
下面先写出两种流行的方式，最后在贴出我自己想出的代码，并且回合前两种传统方式进行比较。
先贴出html的结构
圣杯布局
html
<div class="header">header</div>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">Footer</div>
css
.main{
float:left;
/*主要内容响应式设计*/
width:100%;
background:red;
}
.left{
float:left;
width:200px;
background:gray;
}
.right{
float:left;
width:200px;
background:yellow;
}
.footer{
clear:both;
}
我们可以看到，三块内容因为长度原因，left和right被挤下了下一行，
1利用负margin值进行定位。
分别给left和right添加css属性
.left{
margin-left:100%;
}
.right{
margin-left:-200px;
}
可以看到left和right的位置已经正确，分别在两侧，但是main的内容被left遮住了
2下一步我们将解决main元素位置问题。
.container{
padding:0 200px 0 200px;
}
main元素已经在自己应该在的位置了，但是left和right也跟着被带离了正确位置
3也是最后一步，就是将left，和right重新带到正确位置。
.left{
position:relative;
left:-200px;
}
.right{
position:relative;
right:-200px;
}
成功完成，这是我自己看完教程以后，自己写了一遍。
双飞翼布局
双飞翼布局在看完后感觉很巧妙，他利用内层元素margin属性，撑开了main元素的宽度
，便于布局left和right的位置，并且避免三者互相遮罩内容
不废话直接上代码
<div class="header">header</div>
<div class="container">
<div class="main">
<div class='main-iner'>main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">Footer</div>
<script src="index.js"></script>
.main{
float:left;
/*主要内容响应式设计*/
width:100%;
background:red;
}
.main-iner{
margin:0 200px;
}
.left{
float:left;
width:200px;
background:gray;
margin-left:-100%;
}
.right{
float:left;
width:200px;
background:yellow;
margin-left:-200px;
}
.footer{
clear:both;
}
我自己对于这种布局的一种办法：
我的方法是利用padding属性，这样main就可以空出left和right的位置，但是padding会影响main的宽度，使得main的宽度是大于 100% 的
但是css中有设置box大小的一个属性 box-sizing 可以设置成
box-sizing:border-box;
这样就一举两得，完美绝了问题，既没有使用圣杯中的相对定位，也没有像双飞翼那样
增加DOM元素。
但是世界上没有完美的东西。 IE8及以上才支持此属性，也就是说IE低版本无法使用此方法。
html
<div class="header">header</div>
<div class="container">
<div class="main">
main
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">Footer</div>
css
.main{
float:left;
/*主要内容响应式设计*/
width:100%;
background:red;
padding:0 200px;
box-sizing:border-box;
}
.left{
float:left;
width:200px;
background:gray;
margin-left:-100%;
}
.right{
float:left;
width:200px;
background:yellow;
margin-left:-200px;
}
.footer{
clear:both;
}
本文是我写了一个多小时的成果吧，小白一枚，有何过错请多指教，
双飞翼和圣杯布局的代码是我看了 此博文后默写出来的，
但是第三种方案是我完全自创，如有雷同，纯属巧合。
转载请注明出处谢谢
