html+css布局之--左边固定宽，右侧自适应（4种方法）

今天，在网上看到一个题目，关于布局的，左边固定宽，右侧自适应（不少于3种方法），看到问题手痒自己试了一下，想了四种方法，码一下。
有好的方法，可以告诉我！
html:

  <h3>第一种:定位+margin-left</h3>
    <div class="cont">
        <div class="one">左侧定宽200px</div>
        <div class="two">右侧自适应</div>
    </div>
    <h3>第二种：flex</h3>
    <div class="cont1">
        <div class="a">左侧定宽200px</div>
        <div class="b">右侧自适应</div>
    </div>
    <h3>第三种：定位+浮动+padding-left+ box-sizing</h3>
    <div class="cont2">
        <div class="a1">左侧定宽200px</div>
        <div class="b1">右侧自适应</div>
    </div>
    <h3>第四种:浮动</h3>
    <div class="cont3">
        <div class="a2">左侧定宽200px</div>
        <div class="b2">右侧自适应</div>
    </div>

css:

<style>
    * {
        margin: 0;
        padding: 0;
    }
    /*****第一种******/
    
    .cont {
        height: 200px;
        overflow: hidden;
        border: 1px solid #000;
    }
    
    .one {
        width: 200px;
        height: 200px;
        background: #ccc;
        position: absolute;
    }
    
    .two {
        height: 200px;
        background: #f60;
        margin-left: 200px;
    }
    /*****第二种******/
    
    .cont1 {
        height: 200px;
        overflow: hidden;
        border: 1px solid #000;
        display: flex;
    }
    
    .a {
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    
    .b {
        height: 200px;
        background: #f60;
        flex: 1;
    }
    /****第三种*******/
    
    .cont2 {
        height: 200px;
        border: 1px solid #000;
        position: relative;
        overflow: hidden;
    }
    
    .a1 {
        width: 200px;
        height: 200px;
        background: #ccc;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .b1 {
        width: 100%;
        height: 200px;
        background: #f60;
        position: absolute;
        left: 200px;
        top: 0;
        padding-right: 200px;
        box-sizing: border-box;
    }
    /*****第四种******/
    
    .cont3 {
        height: 200px;
        border: 1px solid #000;
    }
    
    .a2 {
        width: 200px;
        height: 200px;
        background: #ccc;
        float: left;
    }
    
    .b2 {
        width: 100%;
        height: 200px;
        background: #f60;
    }
</style>

自己码一下，效果更好！