两栏布局

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

方法一：BFC（块级格式化上下文）

<div class="container">
  <div class="left"></div>
  <div class="right">1</div>
</div>

/* 方法一：BFC（块级格式化上下文）*/
.container {
  height: 100vh;
  border: 1px solid MediumSeaGreen;
}
.left {
  width: 200px;
  height: 100%;
  background: Tomato;
  float: left;
}
.right {
  overflow: hidden; /* 触发 bfc */
  background: Orange;
  height: 100%;
}

1. 将左边元素宽度设置为 200px，并且设置 float: left; 向左浮动, 使其脱离文档流。

2. 右边元素 的 overflow: hidden;

方法二：绝对布局 1

<div class="container">
  <div class="left"></div>
  <div class="right">1</div>
</div>

/* 方法二：绝对布局1 */
.container {
  height: 100vh;
  position: relative;
  border: 1px solid MediumSeaGreen;
}
.left {
  width: 200px;
  height: 100%;
  background: Tomato;
  position: absolute;
}
.right {
  margin-left: 200px;
  background: Orange;
  height: 100%;
}

1.

2.

方法三：绝对布局 2

<div class="container">
  <div class="left"></div>
  <div class="right">1</div>
</div>

/* 方法三：绝对布局2 */
.container {
  height: 100vh;
  position: relative;
  border: 1px solid MediumSeaGreen;
}
.left {
  width: 200px;
  height: 100%;
  background: Tomato;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: Orange;
  height: 100%;
}

1.

2.

方法四：弹性布局

<div class="container">
  <div class="left"></div>
  <div class="right">1</div>
</div>

/* 方法四：flex 布局 */
.container {
  height: 100vh;
  border: 1px solid MediumSeaGreen;
  display: flex; /*flex 布局 */
}
.left {
  width: 200px;
  height: 100%;
  background: Tomato;
}
.right {
  height: 100%;
  background: Orange;
  flex: 1; /*flex 布局 */
}

1. 首先将 父元素 的 display: flex, 并且设置 flex-flow: row（默认）,

2. 左侧元素 width: 200px;,

3. 右侧元素 的 flex: 1; 或者 flex: auto;,

方法五：table 布局

<div class="container">
  <div class="left"></div>
  <div class="right">1</div>
</div>

/* 方法五：table 布局 */
.container {
  width: 100%;
  height: 100vh;
  border: 1px solid MediumSeaGreen;
  display: table; /* table 布局 */
}
.left {
  width: 200px;
  height: 100%;
  background: Tomato;
  display: table-cell;
}
.right {
  height: 100%;
  background: Orange;
  display: table-cell;
}

1. 将左边元素宽度设置为 200px，并且设置 display: table-cell;

2. 右边元素 display: table-cell;

方法六：CSS 函数 calc()

<div class="container">
  <div class="left"></div>
  <div class="right">1</div>
</div>

/* 方法六：css 计算宽度 calc*/
.container {
  height: 100vh;
  border: 1px solid MediumSeaGreen;
}
.left {
  float: left;
  width: 200px;
  height: 100%;
  background: Tomato;
}
.right {
  height: 100%;
  background: Orange;
  float: right;
  width: calc(100% - 200px);
}

1. 将左边元素宽度设置为 200px，并且设置 float: left; 向左浮动, 使其脱离文档流。

2. 右边元素 width 的值为 calc(100% - 200px) 且 float: right;

方法七：float + margin-left

<div class="container">
  <div class="left"></div>
  <div class="right">1</div>
</div>

/* 方法七：float + margin-left*/
.container {
  height: 100vh;
  border: 1px solid MediumSeaGreen;
}
.left {
  float: left;
  width: 200px;
  background: Tomato;
  height: 100%;
}
.right {
  margin-left: 200px;
  background: Orange;
  height: 100%;
}

1. 将左边元素宽度设置为 200px，并且设置 float: left; 向左浮动, 使其脱离文档流。

2. 右边元素 的 margin-left 设置为 200px。

方法八：栅格布局

<div class="container">
  <div class="left"></div>
  <div class="right">1</div>
</div>

.container {
  /* 设置父元素为 grid */
  display: grid;
  /* 设置几个值代表布局为几行，每个值是行高 */
  grid-template-rows: 100vh;
  /* 设置几个值代表布局为几列，每个值是列宽 */
  grid-template-columns: 200px auto;
}
.left {
  background: Tomato;
}
.right {
  background: Orange;
}