html

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

1. float+margin-left

.main{
 border: 1px solid black;
  overflow: hidden;//清除浮動
}
.left{
  width: 200px;
  background: green;
  float: left;
  
}
.right{
  margin-left: 200px;
  background: red;
}

left設為float: left,脫離文檔流。right是塊級元素會"無視"浮動元素，它的寬度隨著適應父元素的寬度，此時margin-left為left元素的寬度。

2. absolute+margin-left

.main{
 border: 1px solid black;
  
}
.left{
  width: 200px;
  background: green;
  position: absolute;
}
.right{
  margin-left: 200px;
  background: red;
}

另外一種讓兩個block排列到一起的方法是對左側盒子使用position: absolute的絕對定位。這樣，右側盒子也能無視掉它

3. 浮動和負邊距實現

html

<div class="main">
    <!--右邊盒子先渲染-->
    <div class="right">
        <div class="right-inner">right-inner</div>
    </div>
    <div class="left">left</div>
</div>

css

.main {
            border: 1px solid black;
        }

        .left {
            float: left;
            width: 200px;
            background: green;
            margin-left: -100%;
        }

        .right {
            float: left;
            width: 100%;
        }

        .right-inner {
            margin-left: 200px;
            background: yellow;
        }

可以不用指定左邊寬度（即不用計算）的方法有：

4. flex

.main{
 border: 1px solid black;
 display: flex;
}
.left{
  width: 100px;
  background: green;
}
.right{
  background: red;
  flex: 1;
}

只須將右邊盒子flex:1,意為寬度自動伸縮

5. float+BFC

.main{
 border: 1px solid black;
overflow: auto;
}
.left{
  float: left;
  background: green;
  margin-right: 20px;
}
.right{
  background: red;
  overflow: hidden;
}

由于觸發了BFC的元素不會與浮動元素重疊這條特性，這種情況下，只需要為左側的浮動盒子設置margin-right，就可以實現兩個盒子的距離了。而右側盒子是block級別的，所以寬度能實現自適應

鏈接

https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/