Css 带有float和nowrap的Firefox bug？

在这把小提琴里，为什么B从黄色的容器里掉出来

它不会发生在铬中

这是Firefox的bug吗

代码如下：

<style>
.a, .b
{
    display: inline-block;
    background: lightblue;
}

.b
{
    float: right; 
}

.c
{
    background: yellow;
    white-space: nowrap;
}
</style>

<div class=c>
    <a class=a>A</a>
    <a class=b>B</a>
</div>

a.b
{
显示：内联块；
背景：浅蓝色；
}
B
{
浮动：对；
}
C
{
背景：黄色；
空白：nowrap；
}
A.
B
是的，这是一个bug。你可以找到Bugzilla的票

David Baron指出，代码本身表明，这是由于一个已知的限制：

原因是nsLineLayout:：ReflowFrame中的代码：

    if (psd->mNoWrap) {
      // If we place floats after inline content where there's
      // no break opportunity, we don't know how much additional
      // width is required for the non-breaking content after the float,
      // so we can't know whether the float plus that content will fit
      // on the line. So for now, don't place floats after inline
      // content where there's no break opportunity. This is incorrect
      // but hopefully rare. Fixing it will require significant
      // restructuring of line layout.
      // We might as well allow zero-width floats to be placed, though.
      availableWidth = 0;
    }

我想知道正确的做法是否是：


根本不操纵可用宽度，或者
使可用宽度无限大，因为nowrap内容无论如何都不会环绕浮动

（理论上，正确的解决方案是在接下来的休息时间之前不要尝试放置浮动。我想知道其他浏览器是否会这样做。）

我实际上认为这是完全可行的；我们已经在mBelowCurrentLineFloats中延迟了浮动的布局；我们只需要做一些类似的事情，并在休息时通知线路布局。不过，这绝非小事。（我认为，如果我们目前处于休息时机，我们还需要立即进行浮动。）

我也不知道其他浏览器是否也是这样做的（Chrome和IE的行为都是一样的，将float和inline块放在同一行上）。不幸的是，我不完全理解浮动和之间的交互，因此我无法进一步评论。
我遇到了相同的错误，对我来说，最好的解决方法是使用等效的flexbox布局：

它在Chrome、Firefox和IE11上的行为相同：


这两个项在同一行上呈现，具有
内联块
类型行为
第二项是右对齐的。（它使用
marginleft:auto
，而不是
float:right
）
如果物品有固定的宽度（我的），如果容器变得太窄，第二个物品会掉落到下一行

我希望这有助于其他人寻找解决方法。
哦……它在Chrome中也会“掉出来”，但我不认为这是一个错误。@Dan-对我来说不是。哦，现在我明白了。我误解了他所说的“掉出来”的意思。我想如果你从
c
中删除
空白：no wrap
，它会解决问题。这种改变似乎并没有改变ChromeYep中的任何东西，为什么会这样？把它贴出来作为回答我本来打算贴出来的哈哈，是的，这是一个bug。当我不得不为一个9年前被报道的bug采取补救措施时，感觉非常糟糕。。。