CSS3 : floating divs over a non-floated div

Question

fiddle :http://jsfiddle.net/PA5T5/1/

我有 3 个 div，其中 2 个是 float 的，1 个不是。 2 个 float div 叠加在非 float div 上。这就是我想要达到的效果。我的问题是:这是它应该如何工作的吗？似乎它不应该工作。这是无需使用绝对定位即可叠加 div 的正确方法吗？

#box1 {
    float:left;
    width:50%;
}
#box2 {
    float:left;
    width:50%;
}
#box3 {
    width:100%;
    height:300px;
    background:red;
}

Answer 1

可以使用固定位置；

或将 margin-top 应用于 float 元素。

#box1 {
    float:left;
    width:50%;
    background:cyan;
    margin-top: 18px;
}
#box2 {
    float:left;
    width:50%;
    background:pink;
    margin-top: 18px;
}
#box3 {
    width:100%;
    height:300px;
    background:red;
    margin-top: -25px
}

参见:http://jsfiddle.net/PA5T5/4/