考虑一个两列布局，右侧盒子的宽度固定，左侧占剩余空间且自适应。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布局
