7種方法實現CSS左側固定，右側自適應布局

一：float+bfc ，左側寬度不需要固定，但父級容器寬度需大於左側寬度，否則右側被擠壓無法展示

/*左浮動固定寬度，右邊盒子overflow:hidden觸發bfc，使其不與浮動盒子區域重疊，因此會重新計算寬度。*/
        .container1 .left{
            float: left;
            width: 100px;
        }
        .container1 .right {
            overflow: hidden;
        }
        /*清除浮動*/
        .container1:after{
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }

二：float+margin-left，左側寬度需固定

/*左浮動固定寬度,右邊margin-left*/
        .container2 .left{
            float: left;
            width: 100px;
        }
        .container2 .right{
            margin-left: 100px;
        }
        /*清除浮動*/
        .container2:after{
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;

三：absolute+margin-left，左側寬度需固定並且絕對定位，缺點：當左側高於右側時，左側會超出父元素，需要使用js補救

.container3 {
            position: relative;
        }
        .container3 .left{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 100px;
        }
        .container3 .right{
            margin-left: 100px;
        }

四：子元素inline-block + calc動態計算寬度，左側寬度需固定，父元素需要設置font-size:0清除默認間距，子元素設置vertical-align：top使其頂部對齊，右側設置 width: calc(100% - 140px);達到自適應

/*雙display:inline-block*/
        .container4{
           font-size: 0;
        }
        .container4 .left{
            width: 100px;
        }
        .container4 .left,.container4 .right{
            display: inline-block;
            font-size: 16px;
            vertical-align: top;
        }
        .container4 .right{
            width: calc(100% - 100px);
        }

五：table-cell，表格布局

.container5{
            display: table;
        }
        .container5 .left,.container5 .right{
            display: table-cell;
        }

六：：flex，最便捷的方法，flex-grow可自由伸張，缺點：低版本IE不支持

    .container6{
        display: flex;
    }
    .container6 .right{
        flex-grow: 1;
    }

七：grid，網格布局

.container7{
            display: grid;
        }
        .container7 .left{
            grid-column:1;
        }
        .container7 .right{
            grid-column:2;
        }

原文鏈接：https://blog.csdn.net/caicai1171523597/article/details/86642535