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設(shè)為float: left,脫離文檔流。right是塊級元素會"無視"浮動元素作谚，它的寬度隨著適應(yīng)父元素的寬度憎亚，此時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排列到一起的方法是對左側(cè)盒子使用position: absolute的絕對定位吩愧。這樣，右側(cè)盒子也能無視掉它
3. 浮動和負邊距實現(xiàn)
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;
}
由于觸發(fā)了BFC的元素不會與浮動元素重疊這條特性极阅，這種情況下溯警，只需要為左側(cè)的浮動盒子設(shè)置margin-right阵具，就可以實現(xiàn)兩個盒子的距離了。而右側(cè)盒子是block級別的，所以寬度能實現(xiàn)自適應(yīng)
鏈接
https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/
