css左边容器固定宽度，右边自适应的几种效果

内容代码如下：

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

第一种：

        .left {
            float: left;/*左浮动*/
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }

        .right {
            overflow: hidden;
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }

第二种：

        .container{
            overflow: hidden;/* 清浮动*/
        }
        .left {
            float: left;/*左浮动，脱离文档流*/
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }
        .right {
            margin-left: 220px;/*左边的margin*/
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }

第三种：

        .left {
            position: absolute;/*左绝对定位，脱离文档流*/
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }

        .right {
            margin-left: 220px;/*左边的margin*/
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }

第四种：（弹性盒子）

        .container{
            display: flex;/*容器内的内容自动横向排列*/
        }
        .left {
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }

        .right {
            flex: 1;/*剩余的部分默认填满*/
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }

第五种：（网格布局）

                .container{
                    display: grid; 
                    grid-template-columns: 200px auto;
                    /* grid-template-columns: 200px 1fr; 这个也可以*/
                    grid-template-rows:100px;
                }
                .left {
                    border: 10px solid green;
                }

                .right {
                    border: 10px solid gold;
                    word-break: break-all;
                    overflow: hidden;
                }