摘要：優點相比之前布局更具有靈活性缺點脫離文檔流，下面的元素都受影響。

有幾種方法呢？

最容易的應該想到利用float來寫，代碼如下

css樣式代碼，以下五種都是用一個樣式代碼

  

    

      

      

      

        
float 
        
float浮動劃分左中右
      
    
  

css代碼

.main {
      height: 100px;
    }

    .left {
      float: left;
      width: 300px;
      background-color: green;
    }

    .right {
      float: right;
      width: 300px;
      background-color: gray;
    }

    .center {
      background-color: gold;
    }
  

總結 優缺點，要理解優缺點，首先要明白什么是浮動
浮動布局的原理：對元素設置float:left或者right，使元素脫離文檔流，同時顯示為類似display:inline-block的形式（可以定義寬高，但是又不會換行）。
優點 相比之前table布局更具有靈活性
缺點 脫離文檔流，下面的元素都受影響。并且要使用clear:both 清除浮動  父類添加clearfix類。

.clearfix:after{content:"";height:0;display:block;clear:both}
.clearfix{*display:inline-block}
.clearfix{*display:block;}

2 . position 定位方法實現
代碼格式如下

.position-left {
      width: 300px;
      background-color: green;
      position: absolute;
      left: 0;
    }
    .position-right {
      width: 300px;
      background-color: gray;
      position: absolute;
      right: 0;
    }
    .position-center {
      background-color: gold;
      position: absolute;
      left: 300px;
      right: 300px;
    }

position 定位優缺點
優點: 每個元素的顯示位置相對獨立，方便每個元素的控制,使用定位屬性，結合邊偏移屬性，可以將元素放置在任何需要的位置，這樣做的好處在于，無需考慮元素本身的顯示方式和頁面代碼中所處的位置，直接將元素分離出來進行定位。
缺點:每個元素獨立控制，很難預測元素之間的相互影響，同時也可能發生元素重疊的情況，導致部分內容無法正常顯示.

3.flex布局實現方法代碼如下

.flex {
      margin-top: 160px;
      display: flex;
    }
    .flex-left {
      width: 300px;
      background-color: green;
    }
    .flex-right {
      width: 300px;
      background-color: gray;
    }
    .flex-center {
      flex: 1;
      background-color: gold;
    }

樣式有稍微的改動代碼如下

    

      

      

        
flex 
        
flex浮動劃分左中右
      
      

    
  

flex 布局的優缺點
優點：Flex 是 Flexible Box 的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。 現在是主流響應式布局開發的主力，任何一個容器都可以指定為 Flex 布局。
缺點：不支持IE8及以下的瀏覽器

4、表格布局代碼如下

    .table {
      width: 100%;
      display: table;
      margin-top: 30px;
    }
    .table-left {
      display: table-cell;
      width: 300px;
      background-color: green;
    }
    .table-right {
      display: table-cell;
      width: 300px;
      background-color: gray;
    }
    .table-center {
      display: table-cell;
      background-color: gold;
    }

優點 表格布局的兼容性很好，在flex布局不兼容的時候，可以嘗試表格布局
缺點 一個單元格高度超出的時候，兩側的單元格也是會跟著一起變高，有時候這種效果不是我們想要的
5、網格布局
代碼如下

  .gird {
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
      margin-top: 30px;
    }
    .gird-left {
      background-color: green;
    }
    .gird-right {
      background-color: gray;
    }
    .gird-center {
      background-color: gold;
    }

優點
1 能大大的提高網頁的規范性和可重用性。在柵格系統下，將頁面模塊的尺寸標準化，這對于大型網站的開發和維護來說，能節約不少成本；
2??基于柵格進行設計，可以讓整個網站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗；
3??對于設計師們來說，靈活的運用柵格系統，能做出很多優秀和獨特的設計。
缺點 css新技術瀏覽器還沒有全面支持。

高度已知換為高度未知呢？
塊內內容超出會是怎樣的效果？
如果是上下高度已知，中間自適應呢？
如果是兩欄布局呢？
如果是上下左右混合布局呢？

順便打個廣告 自學的前端快3個月了想找一份工作，地點北京。