利用overflow：hidden简单布局—左侧固定右侧自适应宽度。

通常我们在布局写页面样式时会做到列表项，比如一个列表是左边有固定图片宽度，右边又是自适应的宽度。那在这时候要去实现这个布局应该怎么做？
一般有以下几种做法：
第一，浮动布局，利用float：left和float：right来实现移动到两边的，但这个做法有问题的是浮动的元素会脱离文档流，没有自身高度。需要解决这问题就需要在这两个的父级元素上加上清除浮动元素clear：both等，而且这样的做法也没有解决自适应的问题，只有知道两个具体的宽度时才可用这个方法。
第二，利用h5的弹性盒子属性，display：flex来实现布局，这个可以做到左边固定右侧自适应的布局，但也是有一点缺点，在低版本的浏览器是不兼容的，这个大都用在移动布局界面上，非常实用。
第三，利用grid布局
第四，利用overflow：hidden布局实现左侧固定右侧自适应，可以适应兼容各浏览器，好用也方便。

.box {
       margin-top: 200px;
       background-color: pink;
}

.left {
       width: 50px;
       height: 50px;
       background-color: deepskyblue;
       /*左边的盒子左浮动*/
       float: left;
}

.right {
       box-sizing: border-box;
       /*padding-left: 50px;*/
       /*height: 50px;*/
       background-color: orangered;
       /*右边的盒子设置overflow:hidden*/
       overflow: hidden;
}
.clearfix:after {
       height: 0;
       content: ".";
       display: block;
       clear: both;
       visibility: hidden;
}

<div class="box clearfix">
      <div class="left">
            左边固定宽度
      </div>
      <div class="right">
            右边宽度自适应, 右边宽度自适应, 右边宽度自适应,右边宽度自适应,
            右边宽度自适应, 右边宽度自适应, 右边宽度自适应, 右边宽度自适应,
            右边宽度自适应, 右边宽度自适应, 右边宽度自适应, 右边宽度自适应,
      </div>
</div>