CSS: Высота контейнера с плавающими дочерними элеметами

Общая проблема дизайнов с плавающими элементами это то, что такие элементы, расположеные внутри контейнера, не приводят к увеличению его размера, для того, чтоб он их уместил внутри. Все дочерние плавающие элементы остаются расположены вне пределов его границ. Если нам к примеру нужно обвести границу вокруг всех плавающих элементов, просто указать CSS параметр border: 1px solid black не получится - граница останется сверху.

Проблема

Рассмотрим следующий пример.

Нам нужно нарисовать черную границу, проходящую вокруг обеих плавающих колонок. Но этого не происходит. Контейнер div сам по себе не имеет высоты, так как он содержит только плавающие элементы. Соответственно граница остается вверху от плавающих колонок.

Это код, который мы будем использовать в данной статье:

div.container {
    border: 1px solid #000000;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

<div class=container"">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

Старое решение

Старое решение требовало добавления в контейнер дополнительного элемента, имеющего со стиль clear: both. Как только внутри контейнера появилсся не плавающий элемент, сам контейнер увеличит свой размер, для того чтоб его вместить:

.clear {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    width: 100%;
}

<div class="clear"></div>

Это можно сделать двумя способами: добавить дополнительный код в HTML исходник (например как в редыдущем примере), или используя для генерации псевдокласс :after. Так как Интернет Эксплорер (Win и Mac) не поддерживает псевдокласс :after, второй способ представляет из себя только практический интерес.

В любом случае, добавление HTML элементов для целей презентации следует избегать. К сожалению, до сегодняшнего времени проблему нельзя было решить другим способом.

Новое решение

div.container {
    border: 1px solid #000000;
    overflow: auto;
    width: 100%
}

Параметр width необходим для того, чтоб установить свойство "hasLayout" в браузере Internet Explorer для Windows (за исключением 7).

Теперь граница аккуратно расположилась вокруг плавающх элементов.

Несколько моментов, на которые следует обратить внимание:

1. Метод работает с тремя из четырех значений overflow: auto, hidden и scroll. Конечно, использование последнего значения приведет к отображению полос прокрутки, не зависимо от того нужны они или нет.
2. Некоторым браузерам для корректного отображения нужно указать параметр width или height для контейнера div.
3. Браузер может показывать полосы прокрутки, если содержимое выходит за рамки контейнера.

Необходимость параметров width или height

Для того, чтоб метод работал в Windows версиях Эксплорера и Opera, нужно указать параметр width или height. Если его не использовать - Эксплорер продолжит показываьть границу вверху колонок, словно свойство overflow не было указано. Opera полностью спрячет содержимое контейнера.

Пашаметр width: 100% тоже подходит для этой цели, но в более сложных макетах может потребоваться другое значение.

Explorer Mac: hidden

Если Explorer для Mac важен при разработке дизайна, следует использовать параметр overflow: hidden. Этот браузер при использовании overflow: auto; всегда отображает полосы прокрутки.

Нежелательные полосы прокрутки

Как Обратил внимание Dave Shea, это решение может привести к появлению нежелательных полос прокрутки, если содержимое контейнера выйдет за его пределы. Лично я удивляюсь этой проблеме. Свойство overflow: hidden гарантирует, что полосы прокрутки ни в какосм случае не появятся. Конечно, может случиться так, что часть контента окажется невидимой, но если мы удостоверимся:

1. высота контейнера остается гибкой (т.е. "такой как необходимо")
2. ширина обьединенных плавающих элементов никогда не превысит ширину контейнера и предпочтительно останется немного меньшей для обеспечения небольшой гибкости, эта проблема никогда не вылезет наружу.

С другой стороны, никогда не говори никогда. В чистых тестах всегда все гладко, а вот в реальных условиях на реальных сайтах, где гораздо больше CSS, что-нибудь, да и вылезет не так. Но пока мы не достигли этой точки, этот метод должен работать как следует.

Конечный код

Для завершенности статьи, вот результирующий код, который нам нужен:

div.container {
    border: 1px solid #000000;
    overflow: hidden;
    width: 100%;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}