Почему пропадает задний background?

Question

[marsel81]

При добавлении параметров

.menu ul {
float: left;
list-style-type: none;
}

.menu ul li {
float: left;
}

пропадает задний bg (.header-top)

https://jsfiddle.net/9h19c1j6/

Answer 1

[Сергей]

https://jsfiddle.net/9h19c1j6/2/

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

<div style="clear: both"></div>

Исправляющий ситуацию

Answer 2

[Ярослав Иванов]

Потому что ты добавил float. Посмотри в Chrome Dev Tools, например, и там наверняка заметишь что у элемента, которому ты задал float, не будет высоты (она будет 0). Чтобы это исправить, можно задать явную высоту, что как-то не ок, или "зачистить границы". Здесь тебе в помощь свойство clear: both. Рекомендую поискать как создавать/применять класс clearfix.

.clearfix::after {
disblay: block;
clear: both;
content: '';
}