Почему не работает background-color?

Question

[Dvorak]

codepen.io/anon/pen/rezyZK

Почему не срабатывает background-color у элемента footer?

Comments

[kulaeff]

Потому, что вы забыли указать класс .footer

Answer 1

[frisarix]

Если все дочерние элементы зафлоачены, то происходит схлопывание родительского блока, т.к блочные элементы не видят зафлоаченные. Самый простой и распространенный способ - псевдораспорки:
footer:after {
content: '';
display: table;
clear: both;
}

Answer 2

[Pshkll]

footer:after{
  content: '';
  display: block;
  clear: both;
}

Comments

[Dvorak]

спасибо! А не подскажете, что делает этот код?

[Pshkll]

Михаил Макарычев: у вас два блока с выравниванием, вам нужно его сбросить. htmlbook.ru/css/clear

Answer 3

[Алексей A]

Добавьте в footer overflow: auto;

Comments

[Pshkll]

Это неправильное решение. Если в блока (в данном случае footer) будет фиксированная ширина, то это свойство при меньшем разрешении экрана добавит к нему горизонтальную полосу прокрутки.

[Алексей A]

Pshkll: Так, а в чём проблема? Если верстают не "резиновый" макет (фиксированная ширина футера), то логично, что нужна будет полоса прокрутки для блока.

[Pshkll]

Алексей A: чтобы вы поняли о чем я говорю - codepen.io/anon/pen/ZWJKzj (сузьте экран браузера)

[Алексей A]

Pshkll: Ну, да. В таком случае, это не подходит.