float:right 跟随 float:left 的标准行为是什么？

Question

假设有这样的HTML标签：

​<span>
  <span id='s1'>Text 1</span>
  <span id='s2'>Text 2</span>
</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

而css样式是：

​#s1 {
  float: left;
}
#s2 {
  float: right;
}

显示器的标准行为是什么？

在某些浏览器中，我看到了

文字 1 文字 2

在某些版本的 IE 中，我看到了

文字 1

         Text 2

似乎 float:right 跨度被推到下一行。

Answer 1

现代浏览器会正确计算收缩后的浮动的宽度并使其位于同一行，前提是浮动的宽度不超过父元素的宽度。我相信这是渲染的正确行为。

Internet Explorer ( 5, 6, 7 ) 不会以相同的方式呈现它们，因为它无法计算收缩包装的浮点数的宽度，因此除非您明确定义宽度，否则它将向下推送到下一行。

Answer 2

默认情况下，<span> 是一个内联元素。使用您提供的确切标记，所有浏览器都应该在同一行显示这两个，除非两个 <span>s 组合的计算宽度大于当前行的长度。