css - フロートの下に表示される Div / ブロック要素?

Question

次の例が http://jsfiddle.net/DLHGs/1/にあります。

bye要素を下にレンダリングすることは可能です hiが、それでも赤いブロックの右側に残りますか? (同じラインではなく)

明確にするために、私は を使用したくありません<br />。float:left適用されたは削除できません。また、既に指定されているもの以外のプロパティhiを設定したくありません。widthheight

編集: 解決策: http://jsfiddle.net/T4XMq/

Answer 1

これはどうですか？

「こんにちは」と「さようなら」をラップするdivに追加float:leftし、「さようなら」をに設定しました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さて、私は通常の赤いボックスの下にさようならを置いているのを見ることができます。float:right代わりにhiを作成できず、を使用できない場合<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>