SOURCE

<!-- 1. 浮动 -->
<!-- <div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div -->
  
<!-- 2. position -->
<!-- <div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div> -->

<!-- 3. flex -->
<!-- <div class="container">
  <div class="left">111</div>
  <div class="right">222</div>
</div> -->

<!-- 4. inline-block -->
<!-- <div class="container">
  <div class="left">111</div>
  <div class="right">222</div>
</div> -->

<!-- 5. float+margin-left -->
<div class="container">
  <div class="left">111</div>
  <div class="right">222</div>
</div>

/* .container {
    background: #000;
}
.container::after {
  content: '\200B';
  clear: both;
  height: 0;
  display: block;
}
.left {
    float: left;
    height: 300px;
    width: 100px;
    background: lightpink;
  }
  .right {
    float: right;
    height: 400px;
    width: calc(100% - 100px);
    background: lightyellow;
  } */

/* 2 */
.container {
  position: relative;
  background: #000;

}
.left {
  position: absolute;
  height: 300px;
  width: 100px;
  background: lightpink;
}
.right {
  height: 400px;
  margin-left: 100px;
  background: lightyellow;
}

/* 3*/
/* .container {
  display: flex;
  flex-direction: row;
  background: #000;
}
.left {
  height: 300px;
  width: 100px;
  background: lightpink;
}
.right{
  height: 400px;
  flex: 1;
  background: lightyellow;
} */

/* 4 */
/* .container {
  background: #000;
  font-size: 0;
}
.left {
  height: 300px;
  width: 100px;
  display: inline-block;
  background: lightpink;
  font-size: 14px;
}
.right {
  display: inline-block;
  height: 400px;
  width: calc(100% - 100px);
  background: lightyellow;
  font-size: 14px;
} */

/* 5 */
/* .container {
  background: #000;
}
.left {
  float: left;
  height: 300px;
  width: 100px;
  background: lightpink;
}
.right {
  margin-left: 100px;
  height: 400px;
  background: lightyellow;
} */