float:right 跟随 float:left 的标准行为是什么？
假设有这样的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
<前><代码>文本 2
似乎 float:right span 被下推到下一行。
Suppose there is such HTML tags:
<span>
<span id='s1'>Text 1</span>
<span id='s2'>Text 2</span>
</span>
And the css style is:
#s1 {
float: left;
}
#s2 {
float: right;
}
What is the standard behavior of the display?
In some browser, I see
Text 1 Text 2
In some version of IE, I see
Text 1
Text 2
It seems the float:right span is pushed down to next line.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
现代浏览器会正确计算收缩浮动的宽度，并使它们位于同一行，前提是浮动的宽度不超过父元素的宽度。我相信这是正确的渲染行为。
Internet Explorer ( 5, 6, 7 ) 不会以相同的方式呈现它们，因为它无法计算收缩包裹浮动的宽度，因此除非您明确定义宽度，否则它将把它推到下一行。
Modern browsers would properly calculate the width of the shrinkwrapped floats and make them be in the same line, provided the widths of the floats dont exceed the parent elements width. I believe this is the correct behaviour for rendering.
Internet Explorer ( 5, 6, 7 ) won't render them the same way because it's incapable of calculating the width of the shrinkwrapped float, so it'll push it down onto the next line unless you explicitly define the width.
默认情况下，
是内联元素。使用您提供的确切标记，所有浏览器都应该在同一行上显示这两个标记，除非计算出的两个的组合宽度大于当前行的长度。By default,
<span>is an inline element. With the exact markup that you have provided, all browsers SHOULD be displaying those two on the same line, unless the computed width of the two<span>s combined is greater than the length of the current line.