css实现两列自适应布局

两列布局：
可以想到五种方式

1.左不动右动 

  .left{
height: 200px;
width: 200px;
position: absolute;
left: 0;
top: 0;
background-color: blue;
}
.right {
height: 300px;
float: left;
width: calc(100% - 200px);
background-color: red;
margin-left: 200px;
}

2.左不动右不动

body{
margin:0;
padding:0;
}
.left{
height: 200px;
width: 200px;
position: absolute;
left: 0;
top: 0;
background-color: blue;
}
.right {
height: 300px;
background-color: red;
margin-left: 200px;
}

3.左动右不动（margin或者bfc）

    margin模式：
    .left{
    height: 200px;
    width: 200px;
    float: left;
    background-color: blue;
        }
  .right{
    height: 300px;
    margin-left: 200px;
    background-color: red;
    }

    bfc模式：
    .left{
    height: 200px;
    width: 200px;
    float: left;
    background-color: blue;
}
.right {
    height: 300px;
    background-color: red;
    overflow: hidden;
}

4.左动右动

.left{
height: 200px;
width: 200px;
float: left;
background-color: blue;
}
.right {
height: 300px;
float: left;
width: calc(100% - 200px);
background-color: red;
}

5.flex布局

    .left{
    height: 200px;
    width: 200px;
    background-color: blue;
}
.right {
height: 300px;
flex: 1;
background-color: red;
}
.container {
display: flex;
}