考虑一个两列布局，右侧盒子的宽度固定，左侧占剩余空间且自适应。html结构如下：

<div class="parent">
    <div class="left">kkk</div>
    <div class="right"></div>
</div>

QQ图片20180714105925.png

1. flex布局实现

方法：flex布局中，作用在元素属性上的flex-grow，默认值为0，值为1是元素占满剩余空间。实现如下：

div{
    height:300px;
}
.parent{
    display:flex;
}
.parent .left{
    background:blue;
    flex-grow:1;
}
.parent .right{
    background:red;
    width:300px;
}

2. absolute实现

方法：右侧绝对定位，左侧设置margin-right

div{
    height:300px;
}
.parent{
    overflow:hidden;
    position:relative;
}
.parent .left{
    background:blue;
    margin-right:300px;
}
.parent .right{
    position:absolute;
    right:0;
    top:0;
    background:red;
    width:300px;
}

3. float实现

方法:右侧盒子float，左侧盒子设置margin-right
调整html结构如下：

<div class="parent">
    <div class="right"></div>
    <div class="left">kkk</div>
</div>

css样式如下：

div{
    height:300px;
}
.parent{
    overflow:hidden;
}
.parent .left{
    background:blue;
    margin-right:300px;
}
.parent .right{
    float:right;
    background:red;
    width:300px;
}

4.总结
上述三种方法中float需要将浮动元素在html结构中往前调，absolute方法中改变absolute盒子的高度对整个parent高度没有影响，因此，目前三年种方法最好用的是flex布局