Техника «самоочистки» среда
21 ноября

Хочу рассказать об одной полезной технике, которой пользуюсь в последнее время. Обычно, для создания колонок при бестабличной верстке, используются плавающие элементы. Но свойство float изначально предназначалось совсем для другого. Отсюда и вытекают некоторые неудобства, такие, как необходимость применения свойства clear. Например, чтобы родительский блок имел ту же высоту, что и внутренние колонки, или, чтобы последующий контент вёл себя, как подобает, а не выскакивал в ненужных местах между колонками.

Обычно вставляется див нулевой высоты, типа div.clear, т.е.  семантически лишний код.

Но очистку можно делать и другим способом, без использования лишних элементов в коде. Поможет нам в этом стандартный псевдо-элемент :after. Техника «самоочистки» заключается в том, что этому элементу задается свойство clear.

Допустим, нам надо сделать две колонки в контенте.

Без использования техники «самоочистки» код, вероятно, выглядел бы так:

<div class="cols">
  <div class="col1">Текст1</div>
  <div class="col2">Текст2</div>
  <div class="clear"></div>
</div>

Но возможно сделать так (что, на мой взгляд, намного симпатичнее):

<div class="cols">
  <div class="col1">Текст1</div>
  <div class="col2">Текст2</div>
</div>

CSS-код:

.cols div{
  float: left;
  width: 50%;
}
.cols:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

В IE, естественно, это работать не будет. Но есть способ заставить IE действовать, так, как нам нужно. В отдельный файл для IE дописываем:

.cols{
  height:1%;
}

Или, если лень создавать отдельный файл для IE, можно прямо в коде указать: //height: 1%.

Результирующий CSS-код будет выглядеть так:

.cols{
  //height: 1%;
}
.cols div{
  float: left;width: 50%;
}
.cols:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Работающий пример

PS. Есть и другой способ добиться нужного нам html-кода — это задать свойство overflow: hidden; у дива .cols (Техника «easyfix»). Его обширно ещё не использовал, поэтому ручаться за него не могу.

PPS. Техника «самоочистки», естественно, придумана не мной. Этот способ был вычитан в книге Седерхольма «Пуленепробиваемый Web-дизайн» и известен в сети уже давно.