总结圣杯布局与双飞翼布局
圣杯布局
圣杯布局需要用到相对定位。
前提条件：
1、中间内容包含左中右三部分。而且中间必须放在最前面。
2、设置中间内容的middle,left,right 为：float:left;这样做的目的是本来它是块状元素，这样一来，浮动使得它们会浮动到一排。
1、通过设置padding来确定左右栏的宽度。
2、通过设置中部的width:100%将中间内容充满。
3、这时“左右”在“中”的后面，用margin-left:-100%将“左”放在中间内容的最左边，用margin-left:-右栏的宽度，就将“右”放在中间内容的最右边。
4、用相对定位，设置“左”：left:-左栏的宽度；设置“右”：right:-右栏的宽度。
代码：
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .top,.foot { height: 50px; clear: both; text-align: center; background-color: red; width: 800px; } .middle { background-color: yellow; width: 100%; } .middle,.left,.right{ position: relative; float: left; height: 500px; } .container { padding: 0 200px 0 180px; margin: 0; width:420px; } .left { margin-left: -100%; width: 180px; left: -180px; background-color: green; } .right { margin-left: -200px; width: 200px; right: -200px; background-color: blue; } </style></head><body> <div class="top"> 这是顶部 </div> <div class="container"> <div class="middle"> 这是中间 </div> <div class="left"> 这是左边 </div> <div class="right"> 这是右边 </div> </div> <div class="foot"> 这是底部 </div></body></html>
双飞翼布局
疑问1.为什么结果出来后中间部分稍微低一点？
1、首先在container中设置一个小盒子，通过设置margin来确定左右栏的宽度。
2、将左栏移到正确的位置，用到的是margin-left:-100%;将右栏移到正确的位置，用到的是margin-left:-"右"栏的宽度。
代码：
<!DOCTYPE html><html><head> <title>圣杯布局</title> <style type="text/css"> .top,.foot { width: 100%; height: 50px; clear: both; background-color: orange; } .container { width: 100%; height: 500px; } .container,.left,.right{ float: left; } .left { margin-left: -100%; width: 180px; height: 500px; background-color: blue; } .right { margin-left: -200px; width: 200px; height: 500px; background-color: red; } .middle { margin: 0 200px 0 180px; height: 500px; background-color: yellow; } </style></head><body> <div class="top"> 这是顶部 </div> <div class="container"> <div class="middle"> 这是中间 </div> </div> <div class="left"> 这是左边 </div> <div class="right"> 这是右边 </div> </div> <div class="foot"> 这是底部 </div></body></html>
总结：
双飞翼布局相对于圣杯布局来说用到的属性较少，相对而言较为简单。学习前端的知识要多练，并从自己的练习中不断总结，这样才能得到进步。
拓展：
关于负margin
不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。
作用于static元素上的负margin属性
/* 元素向上移10px*/
#mydiv1 {margin-top:-10px;}
当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。
但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。
如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。
浮动元素上的负margin
如果给一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠。这对于创建1列是100%宽度而其他列是固定宽度（比如100px）的自适应布局来说是非常有用的方法。
/* 应用在与浮动相反方向的负margin */
#mydiv1 {float:left; margin-right:-100px;}
若两个元素都为浮动，且#mydiv1的元素设定margin-right为20px。这样#mydiv2会认为#mydiv1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，#mydiv1的内容不受影响，保持原有的宽度。
如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。
注意：margin-left:-100%的100%指的是父元素的百分比。
