圣杯布局 | 双飞翼布局

一、圣杯布局

圣杯布局需要将中间栏放在前面优先渲染

圣杯布局利用浮动、负边距、相对定位来实现

• 父元素 container 设置左右 padding 空出左右两栏位置。
• 三栏均设置向左浮动，中间栏设置 width: 100%; ，即与父元素宽度一样，将左右两栏挤到下面。
• 设置 margin 属性为负值将左右两栏移到上面，margin-left: -100%; 可以上移到上一行最左边， margin-left: -100px; 可以上移到上一行最右边（100px 是右边栏宽度）。
• 利用相对定位，将左右两栏定位到两边

<div class = "container">
  <div class = "center">center</div>
  <div class = "left">left</div>
  <div class = "right">right</div>
</div>

.container {
  padding: 0px 100px;
  min-width: 300px;
  overflow: hidden;
}
.left {
  float: left;
  position: relative;
  left: -100px;
  margin-left: -100%;
  width: 100px;
  background-color: red;
}
.center {
  float: left;
  width: 100%;
  background-color: green;
}
.right {
  float: left;
  position: relative;
  left: 100px;
  margin-left: -100px;
  width: 100px;
  background-color: blue;
}

二、双飞翼布局

 双飞翼布局在中间栏增加了一个节点 inner 来使左右两侧的空间空开。

相对于圣杯布局，双飞翼布局左右两栏位置的保留通过设置中间栏的 margin 来实现，其他方面同样利用浮动和负边距实现

• 三栏均设置向左浮动，中间栏设置 width: 100%;，将左右两栏挤到下面，同圣杯布局。
• 设置 margin 属性为负值将左右两栏移到上面，同圣杯布局，此时左右两栏各在最左边和最右边。
• 设置 inner 盒子的 margin 属性将两侧空开。

<div class="container">
  <div class="center">
    <div class="inner">inner</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

.container {
  overflow: hidden;
}
.left {
  float: left;
  margin-left: -100%;
  width: 100px;
  background-color: red;
}
.center {
  float: left;
  width: 100%;
}
.inner {
  margin: 0px 100px;
  background-color: green;
}
.right {
  float: left;
  margin-left: -100px;
  width: 100px;
  background-color: blue;
}

 三、异同点

相同点：

（1）布局类似，都是实现特定需求的三列布局。

（2）都使用了float浮动向左脱离文档流,让左中右三列浮动，通过父外边距形成三列布局。

不同点：

• 实现方法不同
  • 圣杯布局是通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置。
  • 双飞翼布局是通过float+margin，没有使用相对定位
• 两列的位置不同
• 圣杯布局是给外部容器加padding，通过相对定位把两边定位出来。
• 双飞翼布局是靠在中间这层外面套一层div加padding将内容挤出来中间

参考资料：CSS 经典布局实现-圣杯布局、双飞翼布局 - 掘金 (juejin.cn)