三栏布局是一种常见的网页布局方式，它可以将网页分成三个主要的区域：左栏、中栏和右栏。下面是一些常见的三栏布局方式：

1. 等宽三栏布局：左、中、右三栏宽度相等，适合于需要在三个区域内放置相同类型的内容的情况。
2. 左右固定，中间自适应布局：左、右两栏固定宽度，中间栏宽度自适应，适合于需要在中间栏内放置主要内容的情况。
3. 左固定，中右自适应布局：左栏固定宽度，中右两栏宽度自适应，适合于需要在左侧栏内放置导航菜单或者其他固定内容的情况。
4. 双飞翼布局：左右两栏固定宽度，中间栏宽度自适应，适合于需要在中间栏内放置主要内容的情况，同时左右两栏也可以放置其他内容。

以上是一些常见的三栏布局方式，具体的应用需要根据实际情况进行选择。

三栏布局，左右两栏宽度固定，中间栏宽度自适应。

假设我们有以下 HTML 结构：

<div class="container">
  <aside class="left"></aside>
  <article class="content"></article>
  <aside class="right"></aside>
</div>

基本样式如下：

html,
body {
  height: 100%;
  margin: 0;
}

.container,
.left,
.right,
.content {
  height: 100%;
  overflow: auto;
}

本文将介绍几种实现三栏布局的方式。

使用 float

.left {
  width: 210px;
  float: left;
}

.right {
  float: right;
  width: 210px;
}

这里会有一点不一样，我们需要调整一下类为 .right 标签的位置。

<aside class="left"></aside>
<aside class="right"></aside>
<article class="content"></article>

注意：使用 float 实现的三栏布局挤压到一定的宽度时，也会存在发生变形情况，这时需要额外进行处理。

使用 position

.container {
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 210px;
}

.content {
  margin: 0 210px;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 210px;
}

使用 flex

.container {
  display: flex;
}

.left {
  width: 210px;
}

.content {
  flex: 1;
}

.right {
  width: 210px;
}

使用 grid

.container {
  display: grid;
  grid-template-columns: 210px 1fr 210px;
}

查看效果：https://codepen.io/lio-zero/pen/abEQXdr