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/
