为什么浮动跨度会下降？答案

【问题标题】：Why does the floated span drop?为什么浮动跨度会下降？
【发布时间】：2011-01-15 05:14:17
【问题描述】：

这段代码在 Webkit (chrome) 中可以正常工作，但在 Firefox 中不行，第二个跨度会下降，你知道为什么吗？

<div id="sbar">
    <span id="status">Some Text</span>
    <span id="mlog" style="float: right;">Some text in the right</span>
</div>

【问题讨论】：

标签： html css firefox

【解决方案1】：

尝试颠倒这两个跨度。

<div id="sbar">
    <span id="mlog" style="float: right;">Some text in the right</span>
    <span id="status">Some Text</span>
</div>

【讨论】：

【解决方案2】：

是的...反转使它可以使用浮点数，您需要像浏览器可以拾取的堆栈一样排列元素 -

所以当向左浮动时

一个

将浮动到 ABC -

一个

ABC

当所有浮动正确时会给你CBA，就像在

一个

CBA

我已经在 Firefox 中看到了这个实现，还没有检查过 webkit。不过，您可以放心。

【讨论】：

【解决方案3】：

此代码在 Webkit (chrome) 中可以正常工作，但在 Firefox 中则不行

WebKit 是错误的。标准规定右浮动必须下一行。

解释见CSS: Three Column Layout problem。

【讨论】：

【解决方案4】：

这段代码在 Webkit 中可以正常工作 (chrome) 但不是在 Firefox 中，其中第二个跨度会下降，你知道吗为什么？

是的。浮动元素的行为将低于代码中它之前的非浮动元素。其他人已经给你修复了。

【讨论】：

【解决方案5】：

可以提出其他解决方案而无需逆转。它确实适用于不同的浏览器

<div id="sbar" style="position:relative;">
    <span id="status">Some Text</span>
    <span id="mlog" style="position:absolute; top:0;right:0;">Some text in the right</span>
</div>

【讨论】：