Почему при добавление float < li > верстка рушиться?

Question

[SteveJ42]

Почему когда в CSS добавляю header li {float:left;} то верстка рушиться?
Интересует почему так вообще происходит и какие варианты решение существуют?
Вариант с добавлением высоты для шапки я уже знаю, хотелось бы узнать какие варианты существуют еще?
Попробуйте в codepen сами))

Comments

[Kirill Makarov]

А какой у тебя ожидаемый результат?

[SteveJ42]

Kirill Makarov, просто стандартная шапка с логотипом и меню, потом li ссылки добавить сделать отступы чтобы хорошо смотрелись, вообщем красота не суть вопроса)))
интересует почему так происходит? почему верстка рушиться?
я просто на чистом css хочу научиться верстать как по старинке на float.

Answer 1

[Ankhena]

Потому что float частично выводит элементы из потока и его родитель перестает что-либо знать о высоте флоатов.

какие варианты решение существуют?

Перестать использовать флоаты для того, для чего они не предназначены.
Но использовать флексы и гриды.

ul {display:flex} решит вашу задачу.
Остальные свойства смотрите в справочнике/спецификации и используйте по мере необходимости.

Comments

[SteveJ42]

а какими способами можно поток сделать нормальным? раньше же верстали этими float и все было нормально

[Ankhena]

SteveJ42,

а какими способами можно поток сделать нормальным?

Из потока выводят float (частично) и position absolute, fixed, sticky.
Все остальные свойства нет.

Для вашей задачи 3 варианта:
- один так себе: инлайн-блоки
и два хороших:
- флексы
- гриды

раньше же верстали этими float и все было нормально

Ну да, использовали свойства не по их назначения. А еще раньше таблицы.
Флоаты подпирали костыликами clearfix (гуглится) разной степени безумия.

Не очень понятно, зачем вам хочется использовать плохие практики, вместо того, чтобы развиваться и пользоваться "благами цивилизации".
Знать нюансы работы флоатов да, нужно. Использовать для того чтобы сделать обтекание картинки текстом - да, в самый раз.
Но не для сеток и микросеток же.

[SteveJ42]

Ankhena, спасибо!

[Сергей delphinpro]

SteveJ42,

раньше же верстали этими float и все было нормально

применяли различные варианты clearfix
Но лучше не гуглите, что это такое, а используйте флексы.
Верстку флоатами пора забыть.

[SteveJ42]

Сергей delphinpro, спасибо!