“float:left;”的优点没有缺点

【问题标题】：Advantages of "float:left;" without its disadvantages“float:left;”的优点没有缺点
【发布时间】：2012-07-08 00:44:08
【问题描述】：

我希望得到与此相同的结果：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 />，因为高度可能会改变。

我该怎么做？

【问题讨论】：

#foo下面要放内容，为什么要浮动？
@Jon 不要指定width

标签： html css

【解决方案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;
}

Example fiddle.

【讨论】：

float:left; 有 display:inline-block; 没有的行为吗？
@Mageek 是的。鉴于您使用 float 的示例，您可以在 <div> 之外使用 float 放置几行文本，而使用 display: inline-block 您可以在其旁边放置一行文本，下一行从框下方开始。
一般来说？（在我的例子中不是特别）
帮助链接：stackoverflow.com/questions/5078239/…
规范中有血淋淋的细节，但我只想说浮动模型与内联元素是完全不同的领域。