圣杯布局

圣杯布局兩邊跟中間同級，中間處在兩邊的上面。不妨假設(shè)兩邊的寬度為200px。
實現(xiàn)過程：

1. 父級盒子不要給寬度，設(shè)置padding: 0 200px;
2. 所有的盒子設(shè)置float: left;
3. 中間盒子設(shè)置width: 100%;
4. 目前左右兩邊的盒子都處于第二行,將左邊的盒子設(shè)置margin-left: -100%;，從而提升到第一行，再將盒子的位置往左調(diào)整一點，position: relative; left: -200px;。
5. 再將右邊的盒子設(shè)置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像翅膀一樣插在中間的兩邊

實現(xiàn)方式：

1. 設(shè)置main,left,right都為左浮動，脫離正常文本流，float: left;。
2. 設(shè)置main的寬度為100%，width: 100%;
3. 設(shè)置left的margin-left: -100%;，從而提升到上一行的最左邊
4. 設(shè)置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實現(xiàn)

中間盒子與左右兩邊的盒子都屬于同級，且按照左->中->右的順序排列。
實現(xiàn)方式：

1. 設(shè)置父盒子的寬度為100%，width: 100%;
2. 設(shè)置子盒子全為左浮動，float: left;
3. 設(shè)置中間盒子的寬度為 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經(jīng)典布局