html - 「float:left;」の利点 その欠点なしで

Question

これと同じ結果を得たい: http://jsfiddle.net/mageek/faDkw/

HTML:

<div id="foo" >Hello</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
World!

CSS:

#foo
{
    background-color:red;
    height:400px;
    float:left;
}

しかし<br />、高さが変わる可能性があるため、すべての がありません。

どうやってやるの？

Answer 1

display: inline-block( MDN docu ) を使用することもできます。これfloat: leftは、ページ フローの外側に div を配置しないのとは異なります。

HTML

<div id="foo" >Hello</div>
<br />
World!

CSS

#foo
{
    background-color:red;
    height:400px;
    display: inline-block;
}

フィドルの例。