DIV+CSS有哪些經典佈局

DIV+CSS經典佈局總結：

1 聖盃佈局

定義：聖盃佈局就是常見的三欄式佈局——兩邊等寬，中間⾃適應的三欄佈局。

實現方式：

1. 設置三欄子元素浮動同向（如 float: left; ）；
2. 父元素設置左右欄寬度的padding（如 padding: 0 200px; ）；
3. 中間自適應寬度設置爲width:100%;；
4. 設置左邊元素margin-left：-100%;，右邊元素margin-left：-200px;，將左右元素向上提；
5. 設置左右元素position：relative;，左側元素向左移left:-200px;，右側元素向右移right:-200px;。

示例：

  <div class="ui-wrap">
    <div class="s-middle"></div>
    <div class="s-left"></div>
    <div class="s-right"></div>
    <!-- 中間欄放前面優先渲染 -->
  </div>

   .ui-wrap{
      overflow: hidden;
      clear: both;
      padding: 0 200px;
    }
    .s-middle,.s-left,.s-right{
      float: left;
      height: 200px;
      }
    .s-left,.s-right{
      position: relative;
      width: 200px;
    }
    .s-middle{
      width: 100%;
      background: red;
    }
    .s-left{
      left: -200px;
      background: green;
      margin-left: -100%;
    }
    .s-right{
      right: -200px;
      margin-left: -200px;
      background: yellow;
    }

運行上面的代碼，會發現當瀏覽器寬度縮小到一定程度時，中間資源的寬度比左右子元素的寬度小時，佈局就會出現問題，所以聖盃佈局要設置最小寬度，爲了解決上面的額問題，提出了雙飛翼佈局。

2 雙飛翼佈局

定義：雙飛翼佈局與聖盃佈局相似。只不過少了relative與left, right的步驟和共同的父元素，主內容元素多了層父元素。

實現方式：

1. 兩欄和自適應元素都設置統一方向的浮動（如 float: left; ）；
2. main元素設置左右margin值，值爲左右兩欄的寬度。main父元素設置寬度爲100%；
3. 左邊欄margin-left爲負100%；
4. 右邊欄margin-left爲負自身寬度。

示例：

  <div class="ui-wrap">
    <div class="s-middle"></div>
  </div>
  <div class="s-left"></div>
  <div class="s-right"></div>

  .ui-wrap{
      float: left;
      width: 100%;
      overflow: hidden;
      clear: both;
    }
    .s-left,.s-right{
      float: left;
      height: 200px;
    }
    .s-left,.s-right{
      width: 200px;
    }
    .s-middle{
      height: 200px;
      margin: 0 200px;
      background: red;
    }
    .s-left{
      background: green;
      margin-left: -100%;
    }
    .s-right{
      margin-left: -200px;
      background: yellow;
    }

3 瀑布流佈局

定義：瀑布流佈局是基於網格佈局，但是每個項的高度是隨機的。

實現方式：

https://www.zhangxinxu.com/wordpress/2012/03/多欄列表原理下實現的瀑布流佈局-waterfall-layout/
https://www.cnblogs.com/wisewrong/p/8458504.html
https://www.jianshu.com/p/a7c6b9f28578