Высота родительского блока при использовании float

Недавно столкнулся с такой небольшой проблемой: при использовании атрибута float: left или float:right, терялась высота родительского блока. Я не буду сейчас разглагольствовать на тему применения свойства float при позиционировании элементов в целом, а просто приведу короткий пример и его решение.

CSS float

Пример:

Допустим, у нас имеется родительский блок div, который содержит 2 дочерних блока (к каждому из которых применено свойство float:left):

<div class="parent">
    <div class="block1"></div>
    <div class="block2"></div>
</div>

CSS стили:

.block1 {
float:left;
background:#eee;
width:300px;
height:300px;
}
.block2 {
float:left;
background:#ccc;
width:300px;
height:300px;
}

Если мы в таком случае посмотрим на высоту родительского блока, то увидим, что она равна нулю:
Родительский блок

Это связано с тем, что элементы со свойством float создают новый контекст наложения и выпадают из основного потока элементов.

Решение:

Справиться с такой ситуацией очень просто – нужно родительскому блоку установить значение атрибута overflow:hidden:

.parent {
overflow:hidden;
}

Тогда родительский блок автоматически примет высоту дочерних блоков.

Свойство overflow управляет отображением содержания блочного элемента, если внутреннее содержимое не помещается и выходит за область заданных размеров.

Посмотреть пример

Теги:,
Комментарии: