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/
