1. First, the first float method we commonly use
   It is important to note that the center of the method is placed behind the right box.

  html *{
            padding:0;
            margin: 0;
        }
        .layout article div{
            min-height: 100px;
        }
        .layout.float .left{
            float: left;
            width: 300px;
            background: red;
        }
        .layout.float .right{
            float: right;
            width: 300px;
            background: blue;
        }
        .layout.float .center{
            background: yellow;
        }
html Part:
 <section class="layout float">
       <article class="left-right-center">
           <div class="left"></div>
           <div class="right"></div>
           <div class="center">
               <h1>Floating Solution</h1>
                <h2>Notice that the content body is at the end</h2>
           </div>
       </article>
   </section>

2. Absolute positioning using position:

html *{
            padding: 0;
            margin: 0;
        }

        .layout article div{
               min-height: 300px;
        }

        .layout.absolute .left-center-right>div{
              position: absolute;
        }

        .layout.absolute .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .layout.absolute .center{
            left: 300px;
            right:300px;
            background: yellow;
        }
        .layout.absolute .right{
            right:0;
            width: 300px;
            background: blue;
        }
html Part:
<section class="layout absolute">
       <article class="left-center-right">
           <div class="left"></div>
           <div class="center">
               <h2>Absolute positioning solution</h2>
               1,This is the absolute positioning middle of the three-column layout
           </div>
           <div class="right"></div>
       </article>
   </section>

3. Third flex layout

 html *{
           margin: 0;
           padding: 0;
       }
        .layout article div{
            min-height: 100px;
        }
        .layout.flexbox .left-center-right{
            display: flex;
        }
        .layout.flexbox .left{
            width: 300px;
            background: red;
        }
        .layout.flexbox .center{
            flex: 1;
            background: yellow;
        }
        .layout.flexbox .right{
            width: 300px;
            background: blue;
        }
   html Part:
   <section class="layout flexbox">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>This is flexbox Solutions</h1>
            1.This is the middle part of the three-column layout
        </div>
        <div class="right"></div>
    </article>
</section>

4. Fourth table layout

html *{
            margin: 0;
            padding: 0;
        }
        .layout article div{
            min-height: 300px;
        }
        .layout.table .left-center-right{
            width: 100%;
            display: table;
            height: 100px;
        }
        .layout.table .left-center-right>div{
            display: table-cell;
        }
        .layout.table .left{
            width: 300px;
            background: red;
        }
        .layout.table .center{
            background: yellow;
        }
        .layout.table .right{
            width: 300px;
            background: blue;
        }
   html Part:
   <section class="layout table">
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>Table Layout</h1>
                1.This is the middle part of the three-column layout table layout
            </div>
            <div class="right"></div>
        </article>
    </section>

5. Grid Layout grid is a new property of HTML 5

 html *{
            padding: 0;
            margin: 0;
        }

      .layout.grid .left-center-right{
          display: grid;
          width: 100%;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 300px;
      }
        .layout.grid .left{
            background: red;
        }
        .layout.grid .center{
            background: yellow;
        }
        .layout.grid .right{
            background: blue;
        }
  html Part:
  <section class="layout grid">
       <div class="left-center-right">
           <div class="left"></div>
           <div class="center">
               <h1>Grid Layout</h1>
           </div>
           <div class="right"></div>
       </div>
   </section>

These five schemes are usually implemented in pc using float and table layout, mobile can use flex to implement grid, absolutely positioned schemes are not available from document stream, and projects are not so buy-for-buy. Floating layout needs to handle BFC issues well.