<dl>
  <dt>1-1. 浮动布局之设置overflow实现</dt>
  <dd class="box-1-1">
    <div class="layout">
      <div class="left">分类列表区域</div>
      <div class="right">主要内容区域<p>这是p标签的内容</p></div>
    </div>
  </dd>
  <dt>1-2. 一列设置浮动另一列设置固定外边距</dt>
  <dd class="box-1-2">
    <div class="layout">
      <div class="left">分类列表区域</div>
      <div class="right">主要内容区域<p>这是p标签的内容</p></div>
    </div>
  </dd>
  <dt>1-3. 不改变html结构情况下，分类在右，内容在左</dt>
  <dd class="box-1-3">
    <div class="layout">
      <div class="left">分类列表区域</div>
      <div class="right">主要内容区域<p>这是p标签的内容</p></div>
    </div>
  </dd>
  <dt>2.左右都设置浮动，只能通过百分比设置宽度实现自适应，并且不能设置内外间距</dt>
  <dd class="box-2">
    <div class="layout">
      <div class="left">分类列表区域</div>
      <div class="right">主要内容区域<p>这是p标签的内容</p></div>
    </div>
  </dd>
  <dt>3-1. 借助对某列增加一个div实现宽度一列固定，另一列自适应布局，并且伪高度看上去一样的布局</dt>
  <dd class="box-3-1">
    <div class="layout">
      <div class="left">分类列表区域</div>
      <div class="right-box">
        <div class="right">主要内容区域<p>这是p标签的内容</p></div>
      </div>
    </div>
  </dd>
  <dt>3-2. 不改变html结构左右互换</dt>
  <dd class="box-3-2">
    <div class="layout">
      <div class="left">分类列表区域</div>
      <div class="right-box">
        <div class="right">主要内容区域<p>这是p标签的内容</p></div>
      </div>
    </div>
  </dd>
  <dt>3-3. 为了利于SEO优化会把主要内容放到页面前边</dt>
  <dd class="box-3-3">
    <div class="layout">
      <div class="right-box">
        <div class="right">主要内容区域<p>这是p标签的内容</p></div>
      </div>
      <div class="left">分类列表区域</div>
    </div>
  </dd>
  <dt>3-4. 为了利于SEO优化会把主要内容放到页面前边，左右互换</dt>
  <dd class="box-3-4">
    <div class="layout">
      <div class="right-box">
        <div class="right">主要内容区域<p>这是p标签的内容</p></div>
      </div>
      <div class="left">分类列表区域</div>
    </div>
  </dd>
</dl>

dl{
  padding: 0;
  margin: 10px;
  dt{
    margin-top: 10px;
    font-size: 20px;
    color: #fff;
    background-color: #00c;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
  }
  dd{
    border: 1px solid #ccc;
    margin: 0;
    height: 200px;
  }
  .layout{
    //background-color: lightgray;
    &::after{
      content: '';
      clear:both;
      display: table;
    }
  }
  .left{background-color: pink; padding: 10px;}
  .right{background-color: skyblue; padding: 10px;}
}
.box-1-1{
  .left{
    width: 200px;
    float:left;
  }
  .right{
    overflow: hidden;
  }
}
.box-1-2{
  .left{
    width: 200px;
    float:left;
  }
  .right{
    margin-left: 220px;
  }
}
.box-1-3{
  .left{
    float: right;
    width: 200px;
  }
  .right{
    margin-right: 220px;
  }
}

.box-2{
  .left{
    float:left;
    width: 10%;
    padding: 0;
  }
  .right{
    float:right;
    width: 90%;
    padding: 0;
  }
}

.box-3-1{
  .left{
    width: 200px;
    float:left;
    margin-right: -100%;
    position: relative;
    z-index:2;
  }
  .right-box{
    background-color: pink;
    float:left;
    width: 100%;
    .right{
      margin-left: 220px;
    }
  }
}

.box-3-2{
  .left{
    width: 200px;
    float:right;
    margin-left: -100%;
    position: relative;
    z-index:2;
  }
  .right-box{
    background-color: pink;
    float:right;
    width: 100%;
    .right{
      margin-right: 220px;
    }
  }
}

.box-3-3{
  .left{
    width: 200px;
    float:left;
  }
  .right-box{
    background-color: pink;
    float:left;
    width: 100%;
    margin-right: -100%;
    .right{
      margin-left: 220px;
    }
  }
}

.box-3-4{
  .left{
    width: 200px;
    float:right;
  }
  .right-box{
    background-color: pink;
    float:right;
    width: 100%;
    margin-left: -100%;
    .right{
      margin-right: 220px;
    }
  }
}