float 实现三栏布局

.left {
  float: left;
  width: 300px;
}
.right {
  float: right;
  width: 300px;
}
.center {
  margin-left: 300px;
  margin-right: 300px;
  /* 或者利用 BFC 原理 */
  /* overflow: hidden; */
}

absolute 实现三栏布局

.left {
  position: absolute;
  left: 0;
  width: 300px;
}
.right {
  position: absolute;
  right: 0;
  width: 300px;
}
.center {
  position: absolute;
  left: 300px;
  right: 300px;
}

table 实现三栏布局

.parent {
  display: table;
  width: 100%;
}
.left, .center, .right {
  display: table-cell;
}

flex 实现三栏布局

.parent {
  display: flex;
}
.left, .right {
  width: 300px;
}
.center {
  flex: 1;
}

grid 实现三栏布局

.parent {
  width: 100%;
  display: grid;
  grid-template-rows: 300px;
  grid-template-columns: 300px auto 300px;
}