float:right 跟在 float:left 后面的标准行为是什么？

Question

5

假设有如下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版本中，我看到：

Text 1

         Text 2

看起来，float:right的span被推到下一行。

- Morgan Cheng

你必须给 span 元素指定宽度才能获得任何有用的/标准的行为。 - Yi Jiang

2个回答

0

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

- Ender

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meder omuraliev · Accepted Answer

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

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