几年前的圣杯布局和双飞翼布局/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区域）