Почему плавающий элемент вытесняет строчный элемент выше?

Question

Не понимаю почему элемент с float:left ниже чем span, но он все равно его вытесняет, подымаясь вверх.

.container {
  width: 200px;
  height: 200px;
  border: 1px solid;
}

.float {
  width: 15px;
  height: 15px;
  border: 1px solid;
  float: left;
  background-color: green;
  clear: both;
}

<div class="container">

  <span>Текст</span>
  <div class="float"></div>

</div>

Answer 1

Именно Float определяет, по какой стороне будет выравниваться элемент. При этом остальные соседние элементы будут обтекать его с других сторон.

Сначала плавающие элементы выстраиваются в нормальном потоке (в вашем случае это элемент .float), а затем уже образуется новый поток (в вашем случае это строчный элемент span), и они сдвигаются либо вправо, либо влево (в зависимости от выбранного значения) в родительском контейнере.

Нормальный поток — это порядок вывода элементов на страницу. В обычном виде все блоки выводятся в том порядке, в котором они записаны внутри HTML документа. Ваш нормальный поток нарушает элемент .float, после чего уже образуется новый поток, который начинается со строчного элемента span.

Плавающие элементы, их называют еще "поплавками", прижимаются к границам своих контейнеров, но не дальше, и не могут подняться выше верхнего края своего же родительского контейнера (в вашем случае это блок .container).

Как рекомендация для вас:

плавающий элемент .float должен быть помещен как можно выше.

Но если же вы планируете его разместить ниже строчного элемента span, то элементу span необходимо применить свойство display: block, пример ниже.

.container {
  width: 200px;
  height: 200px;
  border: 1px solid;
}

span {
  display: block;
}

.float {
  position: relative;
  width: 15px;
  height: 15px;
  border: 1px solid;
  float: left;
  background-color: green;
  clear: both;
}

<div class="container">
  <span>Текст</span>
  <div class="float"></div>
</div>

БЛОГ НА HUSL

Почему плавающий элемент вытесняет строчный элемент выше?

Ответы (1 шт):