Почему background исчезает когда я задаю float: left?

Question

[HeartOfProgrammer]

Все хорошо показывает background, но как стоит задать этот код

.nav li{
	float: left;
}

Так как background исчезает, а мне с ним надо сделать меню.
jsfiddle.net/L0javsw5

Answer 1

[Сергей delphinpro]

Потому что плавающие блоки выпадают из родительского потока. Так как в потоке .nav больше ничего не остается, - он схлопывается до нуля по высоте, соответственно и фона не видно (который вовсе не пропадает на самом деле).
Примените к .nav клирфикс, или создайте новый контекст форматирования (с помощью overflow или inline-block)
Ваш пример с клирфиксом

И еще: учите теорию htmlbook.ru css-live.ru

Comments

[Евгений Петров]

Я бы послал прочесть спецификацию (про блочную модель и визуальную модель оформления), но теперь, видимо, так уже не принято...

[Евгений Петров]

Для полноты добавил бы, что контекст создадут (помимо плавающих и позиционированных) элементы с display:table-cell и display:table-caption.

[Евгений Петров]

Я согласен, начинать со спецификации — полный абзац. Но на каком-то этапе уже пора приобщаться к нормальному источнику информации.

Я тут пару дней попал впросак, потому что ориентировался на 3-й модуль, а синтаксис поменялся в 4-м модуле. Что там говорить про многие ресурсы, которые обновляются не слишком часто?..

Answer 2

[Александр Миранович]

У вас не прописаны стили . clearfix. jsfiddle.net/L0javsw5/4