圣杯布局和双飞翼布局的目的：

  • 三栏布局，中间一栏最先加载和渲染
  • 两侧内容固定，中间内容随着宽度自适应
  • 一般用于PC页面

技术总结：

  • 使用float
  • 两侧使用margin负值，以便和中间内容横向重叠

  • 防止中间内容被两侧覆盖，一个用padding，一个用margin

    圣杯布局

    image.png ```html

header
center
left
right
footer
<a name="eVRvs"></a> ##### 双飞翼布局 双飞翼布局在content内部再加了个div, 并设置左右margin, 则left和right都只用负margin-left就能移到对应位置html
header
center
left
right
footer

```