Почему не работает clearfix?

Question

[Cocorico]

Есть блок с float: right, расположенный между двумя горизонтальными полосками (.separator).
Должно быть по полоске сверху и снизу от блока, сейчас они слеплены, потому что float: right выпадает из потока.
Важное условие, элементу с float я не могу добавить обертку с overflow hidden или auto.

Остается добавить clearfix либо самому блоку float, либо полоске, которая следует за этим блоком.
Испробовано несколько видов clearfix (c display: table, с visibility: hidden и тд)
Но это не работает и я не понимаю почему.

Прототип https://codepen.io/overveg/pen/ZodaZx

Answer 1

[Андрей Верх]

Вы не там очищаете поток

.separator {clear:both}

Comments

[Cocorico]

Спасибо, это работает.
Но все равно не могу понять почему clear через псевдоэлементы не сработал...

.float::after {
    content: "";
    display: table;
    clear: both;
}

[Андрей Верх]

Потому что after/before находятся внутри блока. Внутри него, они поток и очищают.

[Cocorico]

и поэтому ::after не может быть применен к самому элементу с флоатом, а только к его родителю, получается так

[Андрей Верх]

overveg, Вроде того. Если мы хотим чтоб сам блок не float'ился, ему и надо задавать clear:both.

Answer 2

[Максим]

https://codepen.io/topicstarter/pen/ELBQbN или так делают обычно.
или .clear вставляют вниз , туда где надо очистить плавающий элемент/элементы.

Но мне стало интересно - скажите, ведь float предназначен не для этого ... с какой целью именно это css свойство вы используете ?

Comments

[Cocorico]

Спасибо, это решило бы проблему, но я не могу добавлять новых блоков в верстку.
Флоат здесь вообще не нужен, это стили сайта клиента. А я в прототипе эмулирую ситуацию, когда мы в интерфейсе администратора и блоку добавляется дополнительная разметка, чтобы можно было удобно их редактировать, перетаскивать элементы и т.д.