关于float的一些问题

Question

如下图的效果如何实现：

#div4{
    width: 180px;
    height: 60px;
}

<div class="wrap" id="div4">

            <div id="div1">容器1;</div>
            <div id="div2">容器2;</div>
            <div id="div3">容器3;</div>
            <p>效果3</p>
        </div>

Answer 1

<div style="width:180px;height:60px;position:relative;border:1px solid #000">
<div style="width:90px;height:30px;float:left;background:#F00;">1
</div>
<div style="width:90px;height:30px;clear:both;float:left;background:#00F;">2
</div>
<div style="width:90px;height:30px;float:left;margin-top:-30px;background:#0F0;">3
</div>
<p style="clear:both;text-align:center;">效果3</p>
</div>

Answer 2

div1,#div2,#div3{width:90px;float:left;}