CSS3：在非浮动div上浮动div

Question

小提琴：http://jsfiddle.net/PA5T5/1/

我有3个div，2个浮动，1个不是。 2个浮动div叠加在非浮动div上。这是我想要实现的效果。我的问题是：它是如何工作的？看起来它应该不起作用。这是一种在不使用绝对定位的情况下叠加div的正确方法吗？

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

Answer 1

您可以使用固定位置;

或将margin-top应用于浮动元素。

#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/