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;
}

示例小提琴。