body{最小宽度：550px;}#container{padding-left:200px;padding-right:150px;}#container.column{position:relative;float:left;}#center{width:100%;}#left{width:200px;right:200px;margin-left:\-100%;}#right{width:150px;margin-right:\-150px;}1111222333双飞翼~~~~Document圣杯布局核心实现：中间三列必须使用floating加relative，然后父元素使用padding腾出左右列的宽度,中间元素使用100%width,这样左中右已经在一个垂直列中,使用margin-left(右列右)withfloating:-100%可以让margin向左偏移(到right)以自身为基础（必须同时是所有浮动的Level元素才有效），这里通过使用左右侧边栏和中间的列可以重叠，然后使用定位左（右）来侧边栏以自身为基准移动到指定位置。双飞翼布局的核心实现：中间三列必须使用浮动，中间列的宽度设置为100%嵌套一个子框，子框使用margin扩展两者的宽度sidecolumns，左列使用margin-left:-100%多列成为一行，右列使用margin-left:-sidebar的宽度实现一行的公共点属于top,middle,和底部。左、中、右、上、下各列的布局，显示在中间内容中间，两边宽度固定，通过floating+margin-left:-100%实现等高，中间自适应宽高差圣杯布局是利用相对定位将侧边栏移动到指定的水平位置，利用左（右）双飞翼是创建中间框的子div，利用margin支撑左边而右边的侧边栏的宽度，省去了定位右边栏写样式的时候，圣杯布局使用margin-right:-100%；或margin-left:-右列宽度；都可以实现定位；但是双飞翼布局只能使用margin-left:-右栏的宽度，如果使用margin-right，会溢出屏幕右栏的宽度；这样做的原因可能是margin-100%会判断相对于前一个元素的定位，而双飞翼中left是根据width100%判断中间元素的，所以right自然是根据width100%判断，但圣杯是根据体内已有的填充物来判断的。3+稍微深一点，两种布局方式通过调试器看sidebar，margin区域+content区域=中间bar的宽度，这就是为什么要用floating，先放中间bar，这样后面的两个侧边栏元素都是基于他的浮动。双飞翼是相对于占满屏幕100%的margin，所以此时使用margin-right自然会跑到屏幕外，所以只能使用margin-left，而圣杯模式是相对于center的已经居中，所以他只能使用margin-right，-100%或者特定像素。如果使用了margin-left，那么center的位置就会被占用。附件：代码圣杯Documentbody{最小宽度：550px;}#container{padding-left:200px;padding-right:150px;}#container.column{position:relative;float:left;}#center{width:100%;}#left{width:200px;right:200px;margin-left:\-100%;}#right{width:150px;margin-right:\-150px;}1111222333双飞翼~~~~Document1111
