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

有幾種方法呢？

最容易的應(yīng)該想到利用float來(lái)寫(xiě)，代碼如下

css樣式代碼，以下五種都是用一個(gè)樣式代碼

  

    

      

      

      

        
float 
        
float浮動(dòng)劃分左中右
      
    
  

css代碼

.main {
      height: 100px;
    }

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

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

    .center {
      background-color: gold;
    }
  

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

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

2 . position 定位方法實(shí)現(xiàn)
代碼格式如下

.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 定位優(yōu)缺點(diǎn)
優(yōu)點(diǎn): 每個(gè)元素的顯示位置相對(duì)獨(dú)立，方便每個(gè)元素的控制,使用定位屬性，結(jié)合邊偏移屬性，可以將元素放置在任何需要的位置，這樣做的好處在于，無(wú)需考慮元素本身的顯示方式和頁(yè)面代碼中所處的位置，直接將元素分離出來(lái)進(jìn)行定位。
缺點(diǎn):每個(gè)元素獨(dú)立控制，很難預(yù)測(cè)元素之間的相互影響，同時(shí)也可能發(fā)生元素重疊的情況，導(dǎo)致部分內(nèi)容無(wú)法正常顯示.

3.flex布局實(shí)現(xiàn)方法代碼如下

.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;
    }

樣式有稍微的改動(dòng)代碼如下

    

      

      

        
flex 
        
flex浮動(dòng)劃分左中右
      
      

    
  

flex 布局的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：Flex 是 Flexible Box 的縮寫(xiě)，意為”彈性布局”，用來(lái)為盒狀模型提供最大的靈活性。 現(xiàn)在是主流響應(yīng)式布局開(kāi)發(fā)的主力，任何一個(gè)容器都可以指定為 Flex 布局。
缺點(diǎn)：不支持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;
    }

優(yōu)點(diǎn) 表格布局的兼容性很好，在flex布局不兼容的時(shí)候，可以嘗試表格布局
缺點(diǎn) 一個(gè)單元格高度超出的時(shí)候，兩側(cè)的單元格也是會(huì)跟著一起變高，有時(shí)候這種效果不是我們想要的
5、網(wǎng)格布局
代碼如下

  .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;
    }

優(yōu)點(diǎn)
1 能大大的提高網(wǎng)頁(yè)的規(guī)范性和可重用性。在柵格系統(tǒng)下，將頁(yè)面模塊的尺寸標(biāo)準(zhǔn)化，這對(duì)于大型網(wǎng)站的開(kāi)發(fā)和維護(hù)來(lái)說(shuō)，能節(jié)約不少成本；
2??基于柵格進(jìn)行設(shè)計(jì)，可以讓整個(gè)網(wǎng)站各個(gè)頁(yè)面的布局保持一致。這能增加頁(yè)面的相似度，提升用戶(hù)體驗(yàn)；
3??對(duì)于設(shè)計(jì)師們來(lái)說(shuō)，靈活的運(yùn)用柵格系統(tǒng)，能做出很多優(yōu)秀和獨(dú)特的設(shè)計(jì)。
缺點(diǎn) css新技術(shù)瀏覽器還沒(méi)有全面支持。

高度已知換為高度未知呢？
塊內(nèi)內(nèi)容超出會(huì)是怎樣的效果？
如果是上下高度已知，中間自適應(yīng)呢？
如果是兩欄布局呢？
如果是上下左右混合布局呢？

順便打個(gè)廣告 自學(xué)的前端快3個(gè)月了想找一份工作，地點(diǎn)北京。