实现两列布局的方法

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/