经典布局 （flex和传统两种实现） 左右两栏式

经典布局常见的两栏式布局有以下两种实现方式：传统方式使用float或者display:table-cell，以及使用Flexbox。

1. 传统实现方式：

HTML:

<div class="container">
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
</div>

CSS:

.container {
  overflow: hidden; /* 清除浮动 */
}
 
.left {
  float: left;
  width: 200px; /* 左侧栏宽度 */
  background-color: #f36;
}
 
.right {
  margin-left: 200px; /* 左侧栏宽度 */
  background-color: #39f;
}

2. Flexbox实现方式：

HTML:

<div class="container">
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
</div>

CSS:

.container {
  display: flex;
}
 
.left {
  width: 200px; /* 左侧栏宽度 */
  background-color: #f36;
}
 
.right {
  flex: 1; /* 占据剩余空间 */
  background-color: #39f;
}

以上两种方式均可实现两栏式布局，Flexbox 方式更加灵活，适合现代布局开发。