你可以漂浮在跨度的右侧吗？
在下面的代码我想up和down浮动红线的权利，但他们漂浮过去，到div。
为什么是这样？
#outer {
margin-top: 50px;
margin-left: 50px;
width: 300px;
border: 1px solid lightgrey;
}
.inner {
border: 1px solid red;
padding: 15px 80px 15px 40px;
position: relative;
}
.up, .down {
border: 1px solid #000;
float: right;
}
.down {
clear: both;
}<div id="outer">
<span class="inner">
<span class="quantity">Quantity</span>
<span class="up">up</span>
<span class="down">down</span>
</span>
</div>如果你检查文档，你会阅读这个：
由于float意味着使用块布局 ，所以它在某些情况下会修改显示值的计算值：
这意味着你的浮动span变成了内联元素中的块元素 ，这会破坏你的布局。
您还可以注意到， padding-top / padding-bottom和border-top / border-bottom不会影响outer div的高度。 这是因为只有line-height计算线boxref的高度时被使用; 因此outer div的高度等于线框的高度。 （您可以增加行高以查看差异）
为了解决这两个问题，您可以将.inner范围的显示更改为inline-block ：
#outer {
margin-top: 50px;
margin-left: 50px;
width: 300px;
border: 1px solid lightgrey;
}
.inner {
border: 1px solid red;
padding: 15px 0 15px 40px; /*remove padding-right to have them close to the red line*/
position: relative;
display:inline-block;
}
.up, .down {
border: 1px solid #000;
float: right;
}
.down {
clear: both;
}<div id="outer">
<span class="inner">
<span class="quantity">Quantity</span>
<span class="up">up</span>
<span class="down">down</span>
</span>
</div>