css左边固定宽度，右边自适应

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

第一种：使用float可以达到效果。注意使用float会脱离文档流产生高度塌陷，所以使用他之后需要清除浮动

.container{
    overflow: hidden;  //清除浮动
}
.left{
    float: left;  //定义浮动
    width: 200px;
    height: 400px;
    background-color: aqua;
}
.right{
    height: 300px;
    background-color: black;
}

/***补充： 清除浮动的其他方法***/
//利用伪元素清除
      .container:after{
            content: '';
            display: block;
            clear: both;
        }
//增加一个空div标签
      .div{clear: both;}

第二种：使用flex布局。父盒子定义display:flex,给右边自适应的盒子添加flex:1让剩余部分默认填满

.container{
     display: flex; /*flex布局*/
   }
.left{
     width: 200px;
     height: 400px;
     background-color: aqua;
   }
.right{
     height: 300px;
     background-color: black;
     flex: 1;/*剩余的部分默认填满*/
   }