左固定右自适应

两列布局:左固定,右自适应

<div class="container">
    <div class="left">
        <p>这是左边的盒子</p>
    </div>
    <div class="right">
        <p>这是右边的盒子</p>
    </div>
</div>

双 float

.container::after {
    content: "";
    display: block;
    clear: both;
}

.left, .right {
    box-sizing: border-box;
    float: left;
}

.right {
    width: calc(100% - 120px);
}

float + margin-left

.container::after {
    content: "";
    display: block;
    clear: both;
}

.left {
    box-sizing: border-box;
    float: left;
}

.right {
    margin-left: 120px;
}

absolute + margin-left

.left {
    box-sizing: border-box;
    position: absolute;
}

.right {
    margin-left: 120px;
}

float + BFC

.container::after {
    content: "";
    display: block;
    clear: both;
}

.left {
    float: left;
}

.right {
    margin-left: 0;
    overflow: auto;
}

BFC 可以阻止元素被浮动元素覆盖

flex

.container {
    display: flex;
}

.right {
    flex: 1
}