Можете ли вы поплавать справа от пролета?

В приведенном ниже коде я хочу, чтобы 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>

Ответ 1

Если вы проверите документацию, вы прочтете это:

Поскольку float подразумевает использование макета блока, он изменяет вычисленное значение отображаемых значений, в некоторых случаях:

Это означает, что ваш плавающий span становится блочным элементом внутри встроенного элемента, который разбивает ваш макет.

Вы также можете заметить, что padding-top/padding-bottom и border-top/border-bottom не влияют на высоту outer div. Это потому, что только line-height используется при вычислении высоты строки коробки ^исх; таким образом, высота 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>