Почему через float все «летит». UPD:Flexbox?

Question

[frittifrutty]

Хочу сделать меню горизонтально, но, когда ставлю значение float, то все "слетает", а в частности - высота body, header, nav
https://jsfiddle.net/3h3tfq42/1/
Что не так? Объясните)

UPD: сделал через flexbox. Кто скажет, что тут неверно или лишнее. Только учусь
https://jsfiddle.net/3h3tfq42/4/

Answer 1

[Sn0wSky]

Потому что после float нужно подчищать с помощью clear: both;
https://jsfiddle.net/tcoxbpyq/

Comments

[frittifrutty]

да не хотелось через clear. Другого выхода нету?

[Sn0wSky]

frittifrutty: с использованием float? нет, если только высоту не зафиксировать

[frittifrutty]

Sn0wSky: что считается правильней и лучшим вариантом? Использовать фикс. высоту или очищать?

[Sn0wSky]

frittifrutty: очищать, конечно же. Если Вы добавите элементы, Вам придется высоту менять, это явно плохой подход.

[frittifrutty]

Sn0wSky: понял, спасибо

Answer 2

[Амир Алимжанов]

menu ul {
list-style: none;
display: flex;
Justify-content: space-around; //или space-beetwin(по вкусу)
}