css浮动后元素的顺序

Question

div设置span子元素向右浮动

但是span的顺序是反过来的

单独设置span的浮动，顺序也是反过来的
why?

Answer 1

该回答引用ChatGPT

如果您想要将span元素向右浮动，并且将它们垂直排列，您可以尝试按以下步骤进行：

1、首先，确保您的HTML代码中的span元素以正确的顺序嵌套在div元素中。在您的代码中，您应该首先将最左侧的span元素放在div元素的最后面，然后将其他的span元素依次放在其前面，以便它们按照预期的顺序显示。您可以像下面这样编写HTML代码：

<div class="all">
    <span class="buy">去结算</span>
    <span class="buyPrice"> </span>
    <span class="buyCount">. </span>
    <span class="delete"> 删除所选商品</span>
</div>

2、然后，您可以使用CSS来将span元素向右浮动，并将它们垂直排列。在您的代码中，您可以将以下CSS样式添加到span元素的样式中：

span {
  float: right; /* 向右浮动 */
  clear: both; /* 清除浮动 */
  display: block; /* 将每个 span 元素设置为块元素 */
}

float: right;使每个span元素向右浮动，clear: both;使浮动元素的下方没有其他元素，display: block;将每个span元素设置为块级元素，以便它们可以垂直排列。这样，您就可以按照预期的顺序垂直地排列span元素，并使它们向右浮动。