两栏布局（左边固定右边自适应）

页面结构

    <div class="content">
		<div class="left">这是第一个div</div>
		<div class="right">这是第二个div</div>
	</div>

1. flex实现（flex:增长 缩减 基础）

   .content{
      display: flex;
      height: 100%;
    } 
    .left{
      flex:0 1 300px;
      background-color: yellowgreen;
    }
    .right{
      flex:1;
      background-color: yellow;
    }

2.float+margin-left实现

   .content{
      width: 100%;
      height: 100%;
    } 
    .left{
      float: left;
      width: 300px;
      background-color: yellowgreen;
    }
    .right{
      margin-left: 300px;
      background-color: yellow;
    }
    .content > div{
      height: 100%;
    }

3. float+overflow

    .content{
      width: 100%;
      height: 100%;
    } 
    .left{
      float: left;
      width: 300px;
      background-color: yellowgreen;
    }
    .right{
      overflow: hidden;
      background-color: yellow;
    }
    .content > div{
      height: 100%;
    } 

4. calc计算宽度

    .content{
      width: 100%;
      height: 100%;
    } 
    .left{
      float: left;
      width: 300px;
      background-color: yellowgreen;
    }
    .right{
      width: calc(100%-300px);
      background-color: yellow;
    }
    .content > div{
      height: 100%;
    }

5. table 布局实现

   .content{
      width: 100%;
      height: 100%;
      display: table;
    } 
    .left{
      width: 300px;
      background-color: yellowgreen;
    }
    .right{
      width: calc(100%-300px);
      background-color: yellow;
    }
    .content > div{
      display: table-cell;
    }

6. 绝对定位

   .content{
      width: 100%;
      height: 100%;
      position: relative;
    } 
    .left{
      width: 300px;
      background-color: yellowgreen;
      left: 0;
      top: 0;
    }
    .right{
      left: 300px;
      top: 0;
      background-color: yellow;
    }
    .content > div{
      position: absolute;
      height: 100%;
      width: 100%;
    } 

7. 绝对定位+margin-left

   .content{
      width: 100%;
      height: 100%;
      position: relative;
    } 
    .left{
      position: absolute;
      width: 300px;
      background-color: yellowgreen;
      left: 0;
      top: 0;
    }
    .right{
      margin-left: 300px;
      background-color: yellow;
    }
    .content > div{
      height: 100%;
    }