自适应两栏布局

利用BFC（块级格式化上下文）

BFC渲染规则

• 内部盒子会在垂直方向，一个接一个地放置；
• 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻的盒子的margin会发生折叠；
• BFC区域不会与float盒子重叠；
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
• 计算BFC的高度时，浮动盒子高度也算；

创建BFC

• 根元素：html；
• 非溢出的可见元素：overflow不为visible；
• 设置浮动：float属性不为none；
• 设置定位：position为absolute或fixed;
• 定义成块级的非块级元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

利用「BFC区域不会与float盒子重叠」「计算BFC的高度时，浮动盒子高度也算」

.container {
  overflow: auto;
}
.item1 {
  width: 100px;
  height: 100px;
  float: left;
}
.item2 {
  overflow: auto;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

利用脱离文档流

如何脱离文档流：

• float；
• 使用绝对定位（position: absolute;）或者固定定位（position: fixed;）；

.container {
  position: relative;
  height: 100px;
}
.item1 {
  position: absolute;
  width: 100px;
  height: 100px;
}
.item2 {
  margin-left: 100px;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

利用flex布局

.container {
  display: flex;
}
.item1 {
  width: 100px;
  height: 100px;
}
.item2 {
  flex-grow: 1;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

利用grid布局

.container {
  display: grid;
  grid-template-columns: 100px 1fr;
}
.item1 {
  width: 100px;
  height: 100px;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>