你不知道的三列布局之圣杯布局和雙飛翼布局（超詳細）

前言

三列布局相信大家都見過，像上面淘寶、豆瓣等很多平臺界面都有使用，他們用到的是圣杯布局和雙飛翼布局，圣杯布局和雙飛翼布局是一些大廠可能問的問題，圣杯布局與雙飛翼布局針對的都是三列左右欄固定中間欄邊框自適應的網頁布局（想象一下圣杯是主體是加上兩個耳朵；鳥兒是身體加上一對翅膀），圣杯布局是Kevin Cornell在2006年提出的一個布局模型概念，在國內最早是由淘寶UED的工程師（傳說是玉伯）改進并傳播開來，在中國也有叫法是雙飛翼布局，在講這兩種布局之前，我們還可以思考一下還有什么方法能做到三列布局嗎？

float浮動實作三列布局

首先，我們肯定要要先定義3個div，分別放left、middle、right，

  <div id="left">
    left
  </div
  ><div id="right">
    right
  </div>
  <div id="middle">
    middle
  </div>

然后用float讓left、right脫離檔案流，并且是一個向左浮動，一個向右浮動，為了方便觀察給3個盒子都定義一個背景色，并且給left和right定義高度和寬度，

#left,#right{
  width: 200px;
  height: 200px;
  background: red;
}
#middle{
  height: 200px;
  background: green;
}
#left{
  float: left;
}
#right{
  float: right;
}

這時你會發現right會掉下來

為什么會這樣呢？
因為我們沒給middle寬度，默認占據整行寬度，所以上面已經滿了，right浮不上去，那我們應該怎么辦呢？我們只要簡單的變動一下html就能解決了，

<div id="left">
    left
  </div
  ><div id="right">
    right
  </div>
  <div id="middle">
    middle
  </div>

雖然float實作了三列布局但是他有很大的缺點：

• 我們要知道float的本質是去解決文字環繞圖片，所以我們在body里面寫一些文字，會將未浮動的middle擠下去，問題就很明顯了，
  
• 所以不建議用這種方法

position定位實作三列布局

跟float布局差不多，只不過用定位實作

• 左右兩列絕對定位并且固定寬度；
• 中間元素自適應，且左右margin設定為左右元素的寬度；

*{
  margin: 0;
  padding: 0;
}
body{
  width: 100%;
  height: 500px;
}

#left,#right{
  width: 200px;
  height: 100%;
  background: pink;
}
#left{
  position: absolute;
  left: 0;
  top: 0;
}
#right{
  position: absolute;
  right: 0;
  top: 0;
}
#middle{
 margin: 0 200px;
}

• 定位的缺點：當出現滾動條時，內容區在滾動條后邊顯示，而且內容區仍舊被壓縮(不推薦使用)
  

圣杯布局

圣杯布局：隨著頁面寬度的變化，三欄布局中的中間盒子自動適應，兩邊盒子寬度固定不變，

 <div class="wrap">
    <div id="header">header</div>
    <div id="content">

      <div id="middle">
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
      </div>

      <div id="left">left</div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
  </div>

先定義好header和footer的樣式，使之橫向撐滿，

.wrap{
  min-width: 600px;
}
#header,#footer{
  height: 50px;
  width: 100%;
  background: grey;
}

給中間三欄都定義float，浮動讓三者在一行，出現高度塌陷，content清浮動；
content清浮動用 overflow: hidden;它會變成一個BFC(Block Format Context)區域使之達到效果（想要了解的小伙伴可以自行去了解哦，當然你不這樣做那可以設定content的高度就行了）給三欄設定一些樣式以便我們觀察，

#content{
 overflow: hidden;
}
#left,#right{
  width: 200px;
  height: 200px;
  background: plum;
}
#middle{
  background: greenyellow;
  /* width: 100%; */
  height: 200px;

}

因為我們中間的middle要自己適應，所以給middle寬度設為100%占滿；，并且給content設定一個padding: 0 200px;這時我們會發現left和right掉下來了

其實left和right是緊貼著middle的，left的實際位置是在紅色邊框這里，由于padding和middle的with:100%占據了整個位置，所以它們就掉下來了，

現在我們就是把left移到middle的左邊和right移到middle的右邊，那怎么做呢？
我們先來弄left，用margin-left: -100%;它就到了middle的最左邊，再用position: relative;相對定位，left: -200px;這樣我們就完成了left部分，

其實作在right也是在紅色方框位置，我們先用margin-left: -200px;把它移出來，再用相同方法移回去就行啦，看看最終效果

完整的css代碼：

*{
  margin: 0;
  padding: 0;
}
.wrap{
  min-width: 600px;
}
#header,#footer{
  height: 50px;
  width: 100%;
  background: grey;
}
#middle,#left,#right{
  float: left;

}
#content{
 overflow: hidden;
 padding: 0 200px;
}
#left,#right{
  width: 200px;
  height: 200px;
  background: plum;
}
#left{
  margin-left: -100%;
  position: relative;
  left: -200px;
}
#middle{
  background: greenyellow;
  width: 100%;
  height: 200px;

}
#right{
  margin-left: -200px;
  position: relative;
  right: -200px;
}

雙飛翼布局

話不多說，先上html

  <div class="wrap">
    <div id="header">header</div>
    <div id="content">

      <div id="middle">
        <div class="middle-inner">
          middle
        </div>
      </div>

      <div id="left">left</div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
  </div>

細心的小伙伴可能發現了不同，middle用了兩個盒子，到時候我們自有妙用，

• 步驟
• middle部分要放在content的最前部分，然后是left，reight；
• 浮動讓三者在一行，出現高度塌陷，content清浮動；
• middle寬度設為100%，占滿；
• left上去，拉到最左邊：margin-left: -100%; right同理：margin-left:-200px;
  這些步驟跟圣杯布局一樣， 要注意哦，移動left和right時，不需要用到定位，

當你做好這些時你會發現middle不見了，這是因為它被left覆寫了

這時我們上面講的妙用就來了，我們只要給middle-inner設定一個padding: 0 200px;就巧妙解決了
最終效果

完整的css代碼

*{
  margin: 0;
  padding: 0;
}
.wrap{
  min-width: 600px;
}
#header,#footer{
  height: 50px;
  width: 100%;
  background: grey;
}

#left,#right{
  width: 200px;
  height: 200px;
  background: green;
}

#middle{
  width: 100%;
  background: blueviolet;
  height: 200px;
  float: left;
}
#content{
  overflow: hidden;
}
#left{
  float: left;
  margin-left: -100%;
}
#right{
  float: left;
  margin-left: -200px;
}
.middle-inner{
  padding: 0 200px;
}

總結

• 圣杯布局（少html 多css）
  先把left、middle、right三元素放進一個大容器中（三元素同級），把這三元素都變為浮動元素，給大容器一個padding來給left、right留位置，只移動left和right元素來達到目的（要用到relative定位）
• 雙飛翼布局（少css 多html）
  先把left、middle、right三元素放進一個大容器中（三元素同級），middle里面在套一個盒子，把left、right邊城浮動并移動（不要用到relative定位），給middle元素一個padding來給left、right留位置，
• 其實雙飛翼布局跟圣杯布局相差不大，區別在于雙飛翼給中間塊套了一個容器，通過設定該容器內部的中間塊margin屬性從而使中間塊兩側的內容不被左右塊遮擋，

如有任何錯誤，煩請指正，歡迎大佬們在評論區留言，互相學習，