浮动的标准行为是什么：右浮动：左边？

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

似乎浮动：右边跨度被推到下一行。

Answer 1

如果浮动的宽度不超过父元素宽度，现代浏览器将正确计算收缩包装浮点的宽度并使它们在同一行中。我相信这是渲染的正确行为。

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

Answer 2

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