多列布局-两列-定宽与自适应

html文件如下

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

1 float+margin

.left{
    float: left;
}
.right{
    margin-left:120px;
}

2 float+overflow

.left{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}

3 table

.parent{
    display: table;width:100%;
    table-layout: fixed;//加速table的渲染；实现了布局优先
}
.left{
    display: table-cell;
    padding-right:20px;
    background-clip: content-box;
}
.right{
    display: table-cell;
}

发现了一个问题， background-color填充颜色的范围包括元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。这样就导致padding20的部分也添加了颜色，所以用background-clip: content-box;来改善，但是兼容性差。
4 flex

.parent{
    display: flex;
}
.right{
    flex: 1;    margin-left: 20px;
}

flex是根据内容做自适应的，所以性能可能会是一个问题，所以适用于做一些小范围的布局（内容不太复杂）