html元素与float:left和float:right对齐

这是我经常遇到的一个非常基本的html css查询。大多数情况下，我会以某种方式找到解决方案，但我很想知道UI出现这种意外行为（根据我的说法）的原因

请看一下这把小提琴：

//向左浮动
Sometext//float:右

右浮动文本移到下一行，尽管我的行中有很多宽度可用。理想情况下，按照我的说法，文本应该在div中与float:left并排显示为left side，float:right并排显示为right side

---

这不会是一个复杂的问题，所以这里有一些非常常见的我不知道的东西吗？

将浮动项放在第一位。浮动相互嵌套，因此它们不会相互影响。浮动图元会自动更改其显示：块

我认为有两件事正在发生。由于换行符是

float:left

，因此它将切换为一个。看起来问题在于文本后面的空白（就在嵌套浮点之前）被认为是尾随的，因为它后面的流中没有任何内容。因此，父级的宽度不考虑空间，即使它在呈现布局时会占用空间，正如您在html中看到的那样

删除尾随空格会使X回到与文本相同的行上

如果您想在文本后面加一个空格，那么应该在html中添加一个不间断的空格（

）

---

您是否出于特定原因将包含div的部分向左浮动？这样做会缩小宽度以匹配其内容。将其向左浮动可使其所有子元素自动向左浮动，除非指定。这样做不对吗？对，马修。谢谢你的回复，我不能那样做。我这里的问题是，如果浮动项位于文本之后，元素应该保持在同一行的最右边位置，但是，它会移到下一行。我从你的答案中得到了原因，因为float将它转换为div，所以它移动到下一行。它是？所以现在问题变成了A B，A和B是否应该出现在同一行中，因为它们都嵌套在同一个div下？@user1242321：解释一下。。。在容器中，所有浮动内容的HTML应显示在任何非浮动内容之前。或者它的行为可能不像您预期的那样。请参阅此更新的提琴：如果我删除float:left从div1开始，所有内容都显示在一行中；但是，如果我添加相同的元素，它将开始出现在下一行。我看不出您在描述什么，但可能只是需要为外部浮动的DIV添加一个宽度。有可能一旦浮动父元素，它的大小就不再足够大，无法容纳一行中的所有内容。

<div > //float left
  Sometext <span> text<.span>//float:right
<div>