左边固定右边自适应

看看下面的常见布局，当右边div的width为auto时，右边div宽度已是自适应

.div1{
    width: 200px;
    height: 200px;
    border: 1px solid black;
}
.div2{
    width: 50px;
    height: 50px;
    background: red;
}
.div3{
    margin-left: 50px;
    width:auto;
    height:30px;
    background: blue;
}

所以要做的是把右边的div移上去，两行变成一行，有如下两种方法：
1.左边div再加个float：left（如果右边div没有margin-left:50px，则会覆盖左边div）
2.父div加relative，左div加absolute（让左边脱离文档流）

脱离文档流的几种方法

两边固定，中间自适应

BFC规则：
与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖