CSS 经典布局实现-圣杯布局、双飞翼布局

前言

本文介绍了圣杯布局与双飞翼布局出现的原因、实现和缺点。

圣杯布局与双飞翼布局都是前端布局的重要内容，虽然以 flex 布局或 grid 布局为主的现代布局方式正在逐渐替代以 float、position 为主的传统布局方式，但古早时期为了解决布局问题而诞生的经典模板仍然值得我们研究与思考。

两种布局都将把主列放在文档流最前面，实现优先加载。
两种布局的实现思路都是将三列浮动，然后通过负外边距形成三列布局。

圣杯布局

为什么会有圣杯布局

我们希望有一种简单高效的三栏布局方式可以实现以下要求：

两边固定宽度，中间自适应
先加载中间的内容（因为两边是导航栏和广告栏，中间是内容区）

为了解决该问题诞生了许多优秀的模板，但几乎都充满了妥协，而圣杯布局从中脱颖而出。

2006 年，圣杯布局在 Matthew Levine 的文章 In Search of the Holy Grail 中被提出。也许是因为当时该模板有效的解决了以上需求（“圣杯”象征“渴求之物”），又或者是因为将左右两栏定位到两侧的过程十分像杯把（圣杯有杯把吗？），它被命名为“圣杯”。

实现

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

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

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

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

.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;
}

缺陷

某一列内容溢出时，三栏不是等高的。（进行等高布局解决）
中间栏的最小宽度不能小于左右两栏的宽度，否则左右两栏会掉到下一行。（设置 min-width 解决）

双飞翼布局

为什么会有双飞翼布局

对于圣杯布局存在的缺陷，淘宝团队进行了优化，提出了双飞翼布局，正如其名，像是飞行的双翼。

实现

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

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

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

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

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

优点与缺点

优点：

双飞翼布局省去了很多 css，由于不使用定位，中间栏的最小宽度不再受限于左右两栏宽度。

缺点：

双飞翼布局多加一层 dom 树节点，增加渲染树生成的计算量， dom 结构不如圣杯布局简单直观。
三列等高问题仍然要单独解决。

作者：同乐
链接：https://juejin.cn/post/7195889798095618109
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。