Demo如下：https://jsfiddle.net/y4okbek1/19/
如果用float的话，他的子类里边有嵌套的float，不想使用码砖块的布局，
absolute的话会脱离文档流，要给他的父类设置高，但实际情况是子类的高度不确定，
所以就想到了relative，但是实现过程中出了以上问题？
目前 主流的 两栏布局，三栏布局 都是用float 实现的，
有清除浮动的代码在，问题不大。
只要避开一些 兼容性代码，还是很稳定的。
LZ 可能对 relative 还不理解，
虽然 给加上 relative 但它还是块状元素，是会新起一行来布局的。
如果只是针对 webkit 可以尝试 用flex-box 可以满足LZ的需求。
为何不用flex?
两列布局，这个在排版里面还是比较常见的，用relative定位是做不到的吧，有以下几种思路以供参考：
1.div2 div3 都使用 display:inline-bolock
2.div1使用display:table, div2 div3使用display:table-cell
个人比较喜欢第一种。
.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;
}
http://codepen.io/lishengzxc/pen/aOjeJY
题主说得float高度塌陷，在父元素上，写上overflow: hidden，触发BFC，是其高度自适应内容高度。