两栏布局（边栏定宽主栏自适应）

 

<div class="layout">
  <h4>方法一：float + overflow (BFC原理)</h4>
  <section>
    <aside class="orange float">aside</aside>
    <main class="green hidden">main</main>
  </section>
  <h4>方法二：float + margin</h4>
  <div class="section">
    <aside class="orange float">aside</aside>
    <main class="green margin">main</main>
  </div>
  <h4>方法三：flex</h4>
  <div class="section flex">
    <aside class="orange">aside</aside>
    <main class="green">main</main>
  </div>
  <h4>方法四：grid</h4>
  <div class="section grid">
    <aside class="orange">aside</aside>
    <main class="green">main</main>
  </div>
</div>

.layout {
  color: #fff;
  padding: 0 100px;
  min-width: 500px;
}
h4 {
  position: relative;
  color: #333;
  margin: 20px 0 10px;
}
h4::before {
  content: '#';
  position: absolute;
  left: -20px;
  top: -1px;
  font-size: 18px;
  color: #38ab89;
}
section {
  margin-bottom: 50px;
}
aside {
  width: 200px;
  height: 50px;
}
main {
  height: 100px;
}
.margin {
  margin-left: 200px;
}
.hidden {
  overflow: hidden;
}
.float {
  float: left;
}
.orange {
  background-color: orange;
}
.green {
  background-color: #38ab89;
}
.flex {
  display: flex;
}
.flex main {
  flex: 1;
}
.grid {
  display: grid;
  grid-template-columns: 200px auto;
}