前言

想必大家都听过圣杯布局和双飞翼布局吧，个人觉得有点苦涩难懂，每次理解了以后，很容易忘掉，所以自我总结了五种方法，供大家参考。

一、float浮动布局

     <style media="screen">
      .box>div{
         height: 100px;
      }
      .left{
        float:left;
        width:300px;
        background: red;
      }
      .center{
        background: yellow;
      }
      .right{
        float:right;
        width:300px;
        background: blue;
      }
     </style>

      <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

总结：看起来是不是很简单，但是浮动清除必须做好，推荐用伪类。

---

二、position定位布局

     <style media="screen">
      .box>div{
         position: absolute;
         height: 100px;
      }
      .left{
        left:0;
        width:300px;
        background: red;
      }
      .center{
        left: 300px;
        right: 300px;
        background: yellow;
      }
      .right{
        right:0;
        width:300px;
        background: blue;
      }
     </style>

      <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

总结：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，所以不推荐。

---

三、flex弹性盒模型布局

     <style media="screen">
      .box{
         display: flex;
      }
      .box>div{
         height: 100px;
      }
      .left{
        order:1;
        width:300px;
        background: red;
      }
      .center{
        flex:1;
        order:2;
        background: yellow;
      }
      .right{
        order:3;
        width:300px;
        background: blue;
      }
     </style>

      <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

总结：有同学问了，直接center设置flex:1不就好了吗，你们看我的dom，<div class="center"></div>不在中间，所以才需要用order进行重新排序，不懂弹性盒模型的请自行学习。

---

四、表格布局

     <style media="screen">
      .box{
         display: table;
      }
      .box>div{
         display: table-cell;
         height: 100px;
      }
      .left{
        width:300px;
        background: red;
      }
      .center{
        background: yellow;
      }
      .right{
        width:300px;
        background: blue;
      }
     </style>

      <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

总结：看起来是不是超简单，缺点是当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高。

---

五、网格布局

     <style media="screen">
      .box{
          display: grid;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 300px;
      }
      .box>div{
         height: 100px;
      }
      .left{
        width:300px;
        background: red;
      }
      .center{
        background: yellow;
      }
      .right{
        width:300px;
        background: blue;
      }
     </style>

      <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

总结：估计很多人和我一样，开始看的这个网格布局，啥玩意不想看了，但是如果你以后面试说出了网格布局，加分不是一点两点。

---