使用relative实现两列布局的问题？

Question

Demo如下：https://jsfiddle.net/y4okbek1/19/
如果用float的话，他的子类里边有嵌套的float，不想使用码砖块的布局，
absolute的话会脱离文档流，要给他的父类设置高，但实际情况是子类的高度不确定，
所以就想到了relative，但是实现过程中出了以上问题？

Answer 1

.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;
}

Answer 2

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

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

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

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

Answer 3

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

Answer 4

为何不用flex?

Answer 5

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