这是我经常遇到的一个非常基本的html-css查询。大多数情况下，我会以某种方式找到解决方案，但我很想知道这种意外行为（按我而言）的原因。
请看一下这个小提琴：http://jsfiddle.net/2yaRU/
<div > //float left
Sometext <span> text<.span>//float:right
<div>
右侧浮动文本移动到下一行，尽管我的行中有很多宽度可用。理想情况下，根据我的说法，文本应与float并排显示：left as left side，float：right in right in the div。
这不是一个复杂的问题，那么我有什么非常普遍的事情吗？
答案 0 :(得分：1)
首先放置浮动项目。浮动嵌套在彼此内部，因此它们不会相互影响。浮动元素会自动更改它：block;
答案 1 :(得分：0)
我认为有一些事情正在发生。由于换行为float:left，因此会切换为block formatting context。看起来问题是文本后面的空格（在嵌套浮点之前）被认为是尾随空格，因为流后面没有任何内容。所以父级的宽度没有考虑到空间，即使它在渲染布局时 占用空间，正如你在html中看到的那样。
删除尾随空格会使X返回与文本相同的行。
如果你想在文本后面留一个空格，你应该在html中添加一个不间断的空格（ ）。