两栏布局

浮动+margin

给左边盒子添加一个浮动，之后再给右盒子设置一个marign-left，将其挤到右边去，形成左边定宽，右边自适应。其中margin-left的值是盒子的宽度。

<style>
    .contain{
        height: 300px;
    }
    .left{
        float: left;
        width: 200px;
        height: 100%;
        background: pink;
    }
    .right{
        margin-left: 200px;
        height: 100%;
        background: skyblue;
    }
</style>
<div class="contain">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

浮动+BFC

给左边盒子添加一个浮动，之后可以给右盒子设置一个overflow:hidden开启BFC，清除左侧盒子浮动带来的影响，形成左边定宽，右边自适应。

<style>
    .contain1{
        height: 300px;
    }
    .left1{
        float: left;
        width: 200px;
        height: 100%;
        background: pink;
    }
    .right1{
        overflow: hidden;
        height: 100%;
        background: skyblue;
    }
</style>
<div class="contain1">
    <div class="left1">Left1</div>
    <div class="right1">Right1</div>
</div>

左盒子定位+margin

此时将左边盒子的浮动，改变成定位就行了，右盒子还是设置一个marign-left，将其挤到右边去，形成左边定宽，右边自适应。其中margin-left的值是左边盒子的宽度。

定位需是absolute/fixed绝对定位或固定定位，但固定定位不符合题意，则使用absolute绝对定位；注意子绝父相。

<style>
    .contain2{
        position: relative;
    }
    .left2{
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background: pink;
    }
    .right2{
        margin-left: 200px;
        height: 200px;
        background: skyblue;
    }
</style>
<div class="contain2">
    <div class="left2">Left2</div>
    <div class="right2">Right2</div>
</div>

右盒子定位+float

给左边盒子添加一个浮动，然后将右盒子的marign-left改成定位，将定位到右边去，形成左边定宽，右边自适应。

定位仍然使用absolute绝对定位；注意子绝父相。

<style>
    .contain3{
        position: relative;
    }
    .left3{
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
    }
    .right3{
        position: absolute;
        left: 200px;
        top: 0;
        width: 100%;
        height: 200px;
        background: skyblue;
    }
</style>
<div class="contain3">
    <div class="left3">Left3</div>
    <div class="right3">Right3</div>
</div>

左右盒子定位

可以将左右盒子都是用定位position:absolute；来设置左侧盒子固定宽度，右侧盒子自适应。

<style>
    .contain4{
        position: relative;
    }
    .left4{
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background: pink;
    }
    .right4{
        position: absolute;
        left: 200px;
        top: 0;
        width: 100%;
        height: 200px;
        background: skyblue;
    }
</style>
<div class="contain4">
    <div class="left4">Left4</div>
    <div class="right4">Right4</div>
</div>

flex布局

先将父盒子设置为弹性容器display:flex;，然后给右侧盒子设置flex:1;，使其自动撑满剩余空间。

<style>
    .contain5{
        display: flex;
    }
    .left5{
        background: pink;
        width: 200px;
        height: 300px;
    }
    .right5{
        flex: 1;
        height: 300px;
        background: skyblue;
    }
</style>
<div class="contain5">
    <div class="left5">Left5</div>
    <div class="right5">Right5</div>
</div>