圣杯布局

圣杯布局两边跟中间同级，中间处在两边的上面。不妨假设两边的宽度为200px。
实现过程：

1. 父级盒子不要给宽度，设置padding: 0 200px;
2. 所有的盒子设置float: left;
3. 中间盒子设置width: 100%;
4. 目前左右两边的盒子都处于第二行,将左边的盒子设置margin-left: -100%;，从而提升到第一行，再将盒子的位置往左调整一点，position: relative; left: -200px;。
5. 再将右边的盒子设置margin-right: -200px;，往上提升一行并且正好处于最右边的位置。

image.png

    <div class="main">
      <div class="content">content</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>

* {
  margin: 0;
  padding: 0;
}

.main {
  min-height: 400px;
  padding: 0 200px;
  text-align: center;
}

.content,.left,.right {
  float: left;
}

.content {
  width: 100%;
  min-height: 400px;
  background: lightcoral;
}

.left,.right {
  width: 200px;
  min-height: 400px;
  background: lightsalmon;
}

.left {
  margin-left: -100%;
  position: relative;
  left: -200px;
}

.right {
  margin-right: -200px;
}

双飞翼布局

双飞翼布局左右两边跟中间不同级，中间的盒子包含在父盒子main中，左右两边跟main 同级，左右两边通过margin-left像翅膀一样插在中间的两边

实现方式：

1. 设置main,left,right都为左浮动，脱离正常文本流，float: left;。
2. 设置main的宽度为100%，width: 100%;
3. 设置left的margin-left: -100%;，从而提升到上一行的最左边
4. 设置right的margin-left: -200px;，从而提升到上一行的最右边

    <div class="main">
      <div class="content">content</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>

* {
  margin: 0;
  padding: 0;
}

.main {
  min-height: 400px;
  width: 100%;
  text-align: center;
}

.main,.left,.right {
  float: left;
}

.content {
  margin: 0 200px;
  min-height: 400px;
  background: lightcoral;
}

.left,.right {
  width: 200px;
  min-height: 400px;
  background: lightsalmon;
}

.left {
  margin-left: -100%;
}

.right {
  margin-left: -200px;
}

Calc实现

中间盒子与左右两边的盒子都属于同级，且按照左->中->右的顺序排列。
实现方式：

1. 设置父盒子的宽度为100%，width: 100%;
2. 设置子盒子全为左浮动，float: left;
3. 设置中间盒子的宽度为 width: calc(100% - 400px);

    <div class="main">
      <div class="left">left</div>
      <div class="content">content</div>
      <div class="right">right</div>
    </div>

* {
  margin: 0;
  padding: 0;
  text-align: center;
}

.main {
  min-height: 400px;
  width: 100%;
}

.content,.left,.right {
  float: left;
}

.content {
  width: calc(100% - 400px);
  min-height: 400px;
  background: lightcoral;
}

.left,.right {
  width: 200px;
  min-height: 400px;
  background: lightsalmon;
}

参考：css经典布局