CSS左右布局-中间自适应

左右布局，左边定宽，右边自适应
常见于中台管理界面、移动端Web的列表展示等等。
方法1：左边设置绝对定位，右边设置左外边距，等于左边的宽度

        .contain{
            position :relative;
            height: 300px;
        }

        .left{
            position: absolute;
            left: 0;
            top: 0;

            width: 200px;
            height: 300px;
            background: red;
        }
        .right{
            /*使用左外边距*/
            margin-left: 200px;
            height: 300px;
            background: blue;
        } 

方法2:左边设置左浮动，右边隐藏溢出的内容

　　　　.contain{
            position :relative;
            height: 300px;
        }
        .left{
            float: left;
            width: 300px;
            height: 300px;
            background:red;
        }
        .right{
            overflow: hidden;//隐藏出现在父元素之外的内容
            background: blue;
            height: 300px;
        }

方法3:弹性布局

  　　　　.contain{
           display: flex;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
        }
        .right{
            flex: 1;
            height: 200px;
            background:blue;
        }

方法4:左右浮动，自适应部分的宽度设置为：width: calc(100% - 200px);

　　     .contain {
            position: absolute;
            
            width: 100%;
            height: 100%;
        }

        .left {
            float: left;
            
            width: 200px;
            height: 100%;
            background-color: #72e4a0;
        }

        .right {
            float: left;
            width: calc(100% - 200px);
            
            height: 100%;
            background-color: #9dc3e6;
        }