几年前的圣杯布局和双飞翼布局/IE6双margin

解决ie6  浮动block元素双margin

display:inline可以解决这个双边距bug，首先是inline元素或inline-block元素是不存在双边距问题的。然后，float:left等浮动属性可以让inline元素haslayout，会让inline元素表现得跟inline-block元素的特性一样，支持高宽，垂直margin和padding等。

圣杯布局与双飞翼布局

它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局

圣杯布局

1. 让左中右显示在一行上，左右固定宽度，中间百分百宽度，html先写中间部分，三块都浮动，给左边margin赋值  【-100%】，让它处于最左侧且于中间部分同一行，此时右块部分处于第二行最左边，占据了左块的位置。
2. 给右块赋值margin 【-200px】(它自身的宽度)让它处于右边，与其他同在一行（float就是把所有块放在一行放不下才排在第二行，float的block元素不加宽度会表现的如inline元素，宽度由内容撑开）
3. 此时左右两块，都盖住了中间块的部分宽度，所以给父块加padding-left, padding-right.值为左右块的宽度，再给左右块分别设置相对定位，让他们偏移出中间块的位置。此时左右块分别占据最左最右固定宽度，中间块是自适应宽度，完毕。

双飞翼布局

1. 同圣杯布局a
2. 同圣杯布局b
3. 此时是给中间块添加一个子块，子块添加margin-left，margin-right，此后中间自适应部分的内容都写在中间块的字块中。

两者的差异：

圣杯布局的实际显示内容的三列是有共同的父元素，所以需要给父元素添加padding，也需要给左右块添加相对定位的偏移。

而双飞翼的实际显示内容的三列是左右两列以及中间块的子块，所以需要给子块加margin。也就是说左右两块仍然改在中间块的上面，只是与中间块的子块显示为三列布局。（给子块加padding，不太好，因为背景会显示在padding区域）