layout

float layout

advantage：better compatibility
disadvantage：not easy to maitain

positon layout

advantage：faster
disadvantage：not easy to maitain

flex layout

advantage：better for mobile terminal
disadvantage：css3

table layout

advantage：the best compatibility，ie8
disadvantage：not friendly for SEO

grid layout

advantage：new tech
disadvantage：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>layout</title>
  <style>
    html *{
      padding: 0;
      margin: 0;
    }
    .left{
      background-color: #f00;
      width: 300px;
    }
    .center{
      background-color: #0f0;
    }
    .right{
      background-color: #00f;
      width: 300px;
    }
    div{
      height: 100px;
    }
    section.layout{
      margin-bottom: 100px;
    }
  </style>
</head>
<body>
<section class="layout float">
  <style>
    .float>.left-right-center>.left{
      float: left;
      width: 300px;
    }
    .float>.left-right-center>.right{
      float: right;
      width: 300px;
    }
  </style>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right">float</div>
    <div class="center"></div>
  </article>
</section>
<section class="layout position">
  <style>
    .position>article{
      position: relative;
    }
    .position>article>div{
      position: absolute;
    }
    .position>.left-center-right>.left{
      left: 0;
      width: 300px;
    }
    .position>.left-center-right>.center{
      /*core code*/
      left: 300px;
      right: 300px;
    }
    .position>.left-center-right>.right{
      right: 0;
      width: 300px;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">position</div>
    <div class="right"></div>
  </article>
</section>
<section class="layout flex-box">
  <style>
    .flex-box{
      margin-top: 300px;
    }
    .flex-box>article{
      display: flex;
    }
    .flex-box>article>.center{
      /*core code*/
      flex: 1;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">flex</div>
    <div class="right"></div>
  </article>
</section>
<section class="layout table">
  <style>
    .table>article{
      width: 100%;
      /*core*/
      display: table;
    }
    .table>.table-cell>div{
      /*core*/
      display: table-cell;
    }
  </style>
  <article class="table-cell">
    <div class="left"></div>
    <div class="center">table</div>
    <div class="right"></div>
  </article>
</section>
<section class="layout grid">
  <style>
    .grid>article{
      /*core*/
      display: grid;
      grid-template-columns: 300px auto 300px;
      grid-template-rows: 100px;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">grid</div>
    <div class="right"></div>
  </article>
</section>
</body>
</html>