Когда использую float, теряется высота родителя

Встретился с проблемой: когда у всех дочерних элементов указал float, то у родителя потерялась высота, т.е. ушла в 0px.
Пример:
.parent { width: 162px; border: 2px solid red; } .children { width: 50px; height: 50px; border: 2px solid blue; float: left; }

Почему родитель перестал учитывать высоту дочерних элементов? Как исправить?

Ответ

Родитель перестал учитывать высоту дочерних элеметов потом, что элементы с float создают новый контекст наложения и выпадают из потока элементов.
Есть четыре варианта решения вашего вопроса:
Если у всех дочерних элементов фиксированная высота, то и у родителя указываем фиксированную высоту:
.parent { width: 162px; border: 2px solid red; /* Фиксированная высота */ height: 54px; } .children { width: 50px; height: 50px; border: 2px solid blue; float: left; }

Самый распространённый вариант ― clearfix. Создаём отдельный элемент или псевдоэлемент со стилем cler: both;
.parent { width: 162px; border: 2px solid red; } .children { width: 50px; height: 50px; border: 2px solid blue; float: left; } /* Clearfix */ .clearfix { display: table; clear: both; visibility: hidden; } .parent.b:after { content: ''; display: table; clear: both; visibility: hidden; }

С элементом:

С псевдоэлементом:

Один из самых интересных, но недейственных вариантов ― указать родителю float и тогда он тоже выпадет из общего потока и "соединится" с дочерними элементами:
.parent { width: 162px; border: 2px solid red; /* Float */ float: left; } .children { width: 50px; height: 50px; border: 2px solid blue; float: left; }

И последний вариант ― указать родителю overflow. Overflow создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён. Подробнее...
.parent { width: 162px; border: 2px solid red; /* Overflow */ overflow: auto; /* Можно устанавливать следущие значения: auto, hidden, overlay, scroll */ } .children { width: 50px; height: 50px; border: 2px solid blue; float: left; }