一、使用負(fù)margin形成三欄布局的條件

1. 三欄在html中的排列順序為：中間欄、左邊欄、右邊欄（中間欄作為主要內(nèi)容放在前面是為了優(yōu)先渲染）
2. 三欄都設(shè)置左浮動，且需要包裹在BFC中（清除浮動對其他文檔流的影響）
3. 兩側(cè)邊欄寬度固定，中間欄寬度為100%自適應(yīng)
4. 左邊欄設(shè)置margin-left: -100%，100%是父容器的寬度；
5. 右邊欄設(shè)置margin-left:-width，“width”是右邊欄的固定寬度
6. 父容器設(shè)置左右padding或中間設(shè)置左右margin預(yù)留出左邊欄和右邊欄存放的空間，預(yù)留的空間必須大于或等于左右兩欄的固定寬度
7. 左邊欄和右邊欄設(shè)置position：relative分別移到左右兩邊預(yù)留的空間

二、圣杯布局

• 實現(xiàn)步驟：

  1. 三個容器設(shè)置左浮動，并清除浮動；
  2. 第一個容器（中間欄）寬度設(shè)為100%；
  3. 第二個容器（左邊欄）寬度固定為200px（固定值根據(jù)實際需求設(shè)定），且margin-left為-100%；
  4. 第三個容器（右邊欄）寬度固定為200px（根據(jù)實際需求設(shè)定），且margin-left為-200px（自身寬度）；
  5. 三個容器的父容器設(shè)置左右padding分別為200px（左右兩欄的寬度），用于存放左邊欄和右邊欄；
  6. 左邊欄設(shè)置position: relative;、right:200px;使左邊欄移動到第一個容器預(yù)留的左側(cè)空間；
  7. 右邊欄設(shè)置position: relative;、left: 200px;使右邊欄移動到第一個容器預(yù)留的右側(cè)空間；
  8. 完成。

• 結(jié)構(gòu)代碼：
  <div class="ct">
  <div class="box1"> </div>
  <div class="box2"></div>
  <div class="box3"></div>
  </div>

• 樣式代碼：
  <style>
  .ct{
  padding-left: 200px;
  padding-right: 200px;
  }
  .ct:after{
  content: '';
  display: block;
  clear: both;
  }
  .box1{
  float: left;
  width: 100%;
  height: 500px;
  background: yellow;
  }
  .box2{
  position: relative;
  right: 200px;
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -100%;
  background: red;
  }
  .box3{
  position: relative;
  left: 200px;
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -200px;
  background: blue;
  }
  </style>

  
  

三、雙飛翼布局

• 實現(xiàn)步驟：
  1. 三個容器設(shè)置左浮動，并清除浮動；
  2. 第一個容器（中間欄）寬度設(shè)為100%；
  3. 第二個容器（左邊欄）寬度固定為200px（固定值根據(jù)實際需求設(shè)定），且margin-left為-100%；
  4. 第三個容器（右邊欄）寬度固定為200px（根據(jù)實際需求設(shè)定），且margin-left
     為-200px（自身寬度）；
  5. 第一個容器中添加一個子元素用于存放主要內(nèi)容，并將子元素的左右margin分別設(shè)為200px，預(yù)留出左邊欄和右邊欄的存放空間；
  6. 完成。
• 結(jié)構(gòu)代碼：
  <div class="ct">
  <div class="box1">
  <div class="main"></div>
  </div>
  <div class="box2"></div>
  <div class="box3"></div>
  </div>
• 樣式代碼：
  <style>
  .ct:after{
  content: '';
  display: block;
  clear: both;
  }
  .box1{
  float: left;
  width: 100%;
  height: 500px;
  background: yellow;
  }
  .box2{
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -100%;
  background: red;
  }
  .box3{
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -200px;
  background: blue;
  }
  .main{
  height: 500px;
  margin-left: 200px;
  margin-right: 200px;
  background: green;
  }
  </style>