两栏布局（左定宽&左不定宽）

第一种：左定宽，右自适应布局

1.浮动布局

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>

* { 
  margin: 0; 
  padding: 0; 
} 
#left { 
  float: left; 
  width: 200px; 
  background-color: green; 
} 
#content { 
  background-color: orange; 
  margin-left: 200px;/*==等于左边栏宽度==*/ 
}

2.浮动和负边距

<div id="left">
  Left Sidebar
</div>
<div id="content">
  <div id="contentInner">
    Main Content
  </div>
</div>

*{
  margin: 0;
  padding: 0;
}
#left {
  background-color: green;
  float: left;
  width: 200px;
  margin-right: -100%;
}    
#content {
  float: left;
  width: 100%;
}    
#contentInner {
  margin-left: 200px;/*==等于左边栏宽度值==*/
  background-color: orange;
}

第二种：左不定宽，右自适应

1.float + BFC

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

.left{
    float: left;
    width: 100px; // 左虽不定宽，但是是有宽度的，但是随着宽度的动态变化布局也是正常的
    margin-right: 20px;    //形成20px的间隔
}
.right{
    overflow: hidden; <!-- 通过设置overflow:hidden来触发BFC特性，也可以使用*zoom: 1 -->
}

2.flex布局

<div class="parent">
  <div class="left">
      <p>left</p>
  </div>
  <div class="right">
      <p>right</p>
  </div>
</div>

.parent{
    display: flex;
}
.left{
    // margin-right: 20px;
}
.left p{
  width: 200px;
}
.right{
    flex: 1;
}