三欄佈局總結

前言

所謂三欄佈局，即便指兩邊定寬，中間寬度自使用的佈局方式，在過去，一直是一個麻煩的問題，
爲了解決這個問題，有各類奇技淫巧，最出名的非聖盃佈局和雙飛翼佈局莫屬了，可是自CSS3發展以來，
特別是flexbox佈局的支持度愈來愈好，這個問題也愈來愈淡化了

正文

1. 浮動佈局

   HTML以下：

   <div class="left">Left</div>
   <div class="right">Right</div>
   <div class="main">Main</div>

   CSS以下：

   body, html {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      .left{
        background: red;
        width:100px;
        float: left;
        height:100%;
      }
      .main{
        background:blue;
        height:100%;
        margin-left:100px;
        margin-right:200px;
      }
      .right{
        background:red;
        width:200px;
        float: right;
        height:100%;
      }

   浮動佈局代碼比較簡潔，同時也易於理解，可是浮動每每會帶來塌陷等問題，並且浮動渲染計算量

   較大，在移動端性能表現較差。另外一個須要注意的是，main即中間部分須要放在最後，若是是left-main-right的方式

納悶main部分將會佔滿剩餘空間，right也就被擠到下一行了，相反，若是咱們設置了right和left，在設置main
main部分將會流入left和right的下面，從而達到咱們的目的

1. 絕對定位

   HTML以下：

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

   CSS以下：

   body, html {
     height: 100%;
     padding: 0;
     margin: 0;
   }
   
   .left, .right {
     position: absolute;
     top: 0;
     background: red;
     height: 100%;
   }
   
   .left {
     left: 0;
     width: 100px;
   }
   
   .right {
     right: 0;
     width: 200px;
   }
   
   .main {
     margin-left: 100px;
     margin-right: 200px;
     height: 100%;
     background: blue;
   }

   該方法有個明顯的缺點，就是若是中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到必定程度，會發生層重疊的狀況

2. 聖盃佈局

   聖盃佈局巧妙的利用負margin來使元素上移，再結合相對定位，移到外層容器的padding位置，從而達到目標
   
   HTML以下：

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

   CSS以下：

   body, html {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      body{
        padding-left:100px;
        padding-right:200px;
      }
      .left{
        background: red;
        width:100px;
        float: left;
        margin-left:-100%;/*-100%：一、致使left超出body內容(此時body內容寬度只有100%-200-100）移到上層2：margin是根據父元素的寬度的，因此-100%就到上層body內容的最前*/
        position: relative;
        left:-100px;/*-100px爲了超出body內容左邊,到達視窗最左*/
        height:100%;
      }
      .main{
        background: blue;
        width:100%;
        height:100%;
        float: left;
      }
      .right{
        background:red;
        width:200px;
        height:100%;
        float: left;
        margin-left:-200px;/*-200px爲了超出body內容到達上一層body內容最後*/
        position: relative;
        right:-200px;/*-200px是爲了向右偏移回到視窗最右*/
      }
      .container{
        width:500px;
        height:200px;
      }

   問題：若是外層內容盒寬度太小，不足以容納.left的寬度，那麼.left依然會被保留在下層

3. 雙飛翼佈局

   雙飛翼佈局與聖盃佈局原理相似，只不過是取消了外層的padding，從而使內容盒等於padding-box從而避免了.left上移後須要設置left值移動到padding
   
   HTML以下：

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

   CSS以下：

   body, html {
       height: 100%;
       padding: 0;
       margin: 0;
     }
     body{
       /*padding-left:100px;*/
       /*padding-right:200px;*/
     }
     .left{
       background: red;
       width:100px;
       float: left;
       margin-left:-100%;/*-100% 1：是爲了超出body內容(此時body內容爲100%)最左 2：到達body上層內容最左也就是視窗最左
       /*position: relative;*/
       /*left:-100px;*/
       height:100%;
     }
     .main{
       background: blue;
       width:100%;
       height:100%;
       float: left;
     }
     .right{
       background:red;
       width:200px;
       height:100%;
       float: left;
       margin-left:-200px;/*-200px 1：是爲了超出body內容(此時body內容爲100%)最左 2：到達body上層內容最右也就是視窗最右
       /*position: relative;*/
       /*right:-200px;*/
     }
     .inner{
       margin-left:100px;
       margin-right:200px;
     }

   與聖盃佈局不一樣的地方已用註釋指出，而雙飛翼問題與聖盃同樣

4. flexbox佈局

   flexbox佈局可謂是最爲理想的解決方案了，一方面，代碼簡潔易懂，另外一方面，當寬度過小時，也能夠經過伸縮，避免重疊
   
   HTML以下：

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

CSS以下：

body,html{
   height:100%;
   padding: 0;
   margin:0;
 }
 body{
   display: flex;
   flex-flow:row nowrap;
 }
 .left{
   background: red;
   width:100px;
   height:100%;
   order:0;
 }
 .main{
   background-color: blue;
   flex:1;
   height:100%;
   order:1;
 }
 .right{
   background: red;
   width:200px;
   height:100%;
   order:2;
 }