我总结的三栏布局 : )只有纯代码，无详细解释，float，absolute 这些不必多说。想了解 flex，grid，

实现方法

absolute 定位布局
float 布局
flex 布局
table 布局
grid 布局

代码示例

absolute 定位布局

html code

<section className="LayoutThree">
    <div className="absolute-layout">
        <div className="left">左</div>
        <div className="center">中</div>
        <div className="right">右</div>
    </div>
</section>

css code

.absolute-layout{
    position: relative;
    .left{
      position: absolute;
      left: 0;
      background: #1fb2ff;
      width: 200px;
    }
    .center{
      position: absolute;
      left: 200px;
      right: 200px;
      background: antiquewhite;
    }
    .right{
      position: absolute;
      right: 0;
      background: coral;
      width: 200px;
    }
  }

float 布局

html code，注意 html 元素的位置

<section className="LayoutThree">
    <div className="float-layout">
        <div className="left">左</div>
        <div className="right">右</div>
        <div className="center">中</div>
    </div>
</section>

css code

.float-layout{
    .left{
      width: 200px;
      float: left;
      background: blueviolet;
    }
    .center{
      overflow: hidden;
      background: bisque;
    }
    .right{
      width: 200px;
      float: right;
      background: brown;
    }
  }

flex 布局

html code

<section className="LayoutThree">
    <div className="flex-layout">
        <div className="left">左</div>
        <div className="center">中</div>
        <div className="right">右</div>
    </div>
</section>

css code

.flex-layout{
    display: flex;
    width: 100%;
    .left{
      background: crimson;
      flex-basis: 200px;
    }
    .center{
      flex-grow: 1;
      background: burlywood;
    }
    .right{
      flex-basis: 200px;
      background: #1564cd;
    }
  }

grid 布局

html code

<section className="LayoutThree">
    <div className="grid-layout">
        <div className="left">左</div>
        <div className="center">中</div>
        <div className="right">右</div>
    </div>
</section>

css code

.grid-layout{
    display: grid;
    grid-template-columns: 200px auto 200px;
    width: 100%;
    margin-bottom: 30px;
    .left{
      background: #d65285;
    }
    .center{
      background: #fdc844;
    }
    .right{
      background: #13e229;
    }
  }

table 布局

html code

<section className="LayoutThree">
    <div className="table-layout">
        <div className="left">左</div>
        <div className="center">中</div>
        <div className="right">右</div>
    </div>
</section>

css code

.table-layout{
    display: table;
    width: 100%;
    margin-bottom: 30px;
    .left{
      display: table-cell;
      width: 200px;
      background: #302f2f;
    }
    .center{
      width: auto;
      display: table-cell;
      background: #61c6cd;
    }
    .right{
      display: table-cell;
      width: 200px;
      background: coral;
    }
  }

以上是我整理的实现三栏布局的 5 种方式，欢迎补充～～

只有纯代码，无详细解释，float，absolute 这些不必多说。想了解 flex，grid，table 布局的可以去看看张鑫旭大神的文章，超级详细，一看就懂。