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

Question

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

Answer 1

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

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

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

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