http://codepen.io/lishengzxc/pen/aOjeJY
题主说得float高度塌陷，在父元素上，写上overflow: hidden，触发BFC，是其高度自适应内容高度。

为何不用flex?

两列布局，这个在排版里面还是比较常见的，用relative定位是做不到的吧，有以下几种思路以供参考：
1. div2 div3 都使用 display:inline-bolock
2. div1 使用 display:table , div2 div3 使用 display:table-cell
个人比较喜欢第一种。

目前 主流的 两栏布局，三栏布局 都是用float 实现的，
有清除浮动的代码在，问题不大。

只要避开一些 兼容性代码，还是很稳定的。

LZ 可能对 relative 还不理解，
虽然 给加上 relative 但它还是块状元素，是会新起一行来布局的。

如果只是针对 webkit 可以尝试 用flex-box 可以满足LZ的需求。

 .div1{
    background:yellow;
    height:100px;
    width:400px;

}
.div2{
    width:100px;
    height:80px;
    background-color:#000;
    position:absolute;
}
.div3{
    position:relative;
    width:300px;
    height:80px;
    background:blue;
    margin-left:100px;
}