css - Div / Block元素出现在浮动下方？

Question

给出以下示例：http: //jsfiddle.net/DLHGs/1/

是否可以让 bye元素呈现在下方hi，但仍保留在红色块的右侧？（而不是在同一行）

澄清一下，我不想对 有任何用途<br />，并且float:left应用到hi是不可移除的，并且我不想设置除了已经指定的那些之外的任何其他width或height属性。

编辑：解决方案：http: //jsfiddle.net/T4XMq/

Answer 1

那这个呢？

我添加float:left到包装“hi”和“bye”的div中，并将“bye”设置为clear:left

<div>
    <div style="width:30px; height:300px; background:red; float:left;"></div>
    <div style="float:left">
        <div style="float:left;">hi</div>
        <div style="clear:both;">bye</div>
    </div>
</div>

Answer 2

好吧，我可以看到clear:both红色框下的正常放置方式。如果您不能改为使用 hifloat:right并使用<div style="clear:right">bye</div>，则在这种情况下可以使用简单的换行符：

<div style="float:left;">hi</div>
<br />
<div>bye</div>

Answer 3

您可以将这两个元素包装在一个 div 中float:left。

<div style="float: left;">
    <div>hi</div>
    <div>bye</div>
</div>

小提琴：http: //jsfiddle.net/DLHGs/8/

Answer 4

<div>
    <div style="width:30px; height:300px; background:red; float:left;"></div>
    <div style="float:left;">
        <div  style="float:left;">hi</div>
        <div style="">bye</div>
    </div>
</div>