Кстати, о названии. Думаю, всем, кто занимается веб-дизайном привычнее выражение "очистка" плавающих блоков... не "клиринг" :)
Клиринг - это все-таки из области финансов, - система расчетов между банками, кто не знает. Название в rss меня поначалу даже смутило - не сразу поняла о чем статья. Оказалось, о такой насущной проблеме, как очистка... =)

Гораздо более универсальное решение — overflow:hidden (для нормальных браузеров и IE7+) плюс zoom:1 (IE5.5-6)

Кстати, о названии. Думаю, всем, кто занимается веб-дизайном привычнее выражение "очистка" плавающих блоков... не "клиринг" :)

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

Клиринг - это все-таки из области финансов, - система расчетов между банками, кто не знает.

Насколько я знаю, клиринг это система взаимозачетов между банками, позволяющая уменьшить перечисляемые суммы, но я про это даже не вспомнил, контекст не тот.

pepelsbey,

Всё бы хорошо, но статейке уже три года — тогда ещё был IE for Mac и не было IE7 ;)

Ну IE7 как раз таки упоминается, а что статья не новая это я сразу отметил.

Да и решение со 100% шириной годится далеко не во всех случаях.

Вот уж точно.

Гораздо более универсальное решение — overflow:hidden (для нормальных браузеров и IE7+) плюс zoom:1 (IE5.5-6)

Спасибо, добавлю в статью. Хотя, конечно, мне следовало погуглить перед тем как переводить, но так уж вышло :)

1) zoom: 1 можно спрятать в условный коммент, или в отдельный файл для IE и ждать пока отомрет 6-я версия. Пока есть невалидный браузер, приходится использовать и невалидный код.

2) Вместо zoom: 1, можно попробовать:

div.container {
    overflow: hidden;
}

* html div.container {
    overflow: visible;
    height:1%;
}

валидатор подвоха не заметит, но это все таки хак.

3) Можно попробовать:

div.container {
    overflow: hidden;
    display:inline-block;
}

div.container {
    display:block;
}

еще более красивое решение :)

donquijote,

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

у меня такие аргументы против вашего решения:
все браузеры поддерживающие :after удовлетворятся всего одним свойством overflow: hidden; из чего следует, что возня с :after не имеет смысла. Дальше идет overkill делаем hasLayout двумя методами сразу, зачем?

Дальше идет overkill делаем hasLayout двумя методами сразу, зачем?

Вернее было бы написать так:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Все это возня с IE/Mac (добавление display:inline-block), конечно же если он вам не нужен, а это скорее всего так, можно оставить только * html .clearfix {height: 1%;}
Подробнее здесь http://www.positioniseverything.net/easyclearing.html

И все-таки, потестируйте пример метода (3) из моего предыдущего коммента, не будет ли так проще, работает в FF2, Opera 9.10, IE5.5-6-7-8b1, Safari 3.0.3, на остальном не тестил, чуть позже поэкспериментирую на сайте.

только если у контейнера задана высота в неотносительных единицах

IE6 достаточно и относительных единиц.

Клиринг плавающих блоков = Сброс обтекания?

Растягивание родителького блока, чтобы он полностью поглощал плавающий, en — Clearing floats, приемлемой русской альтернативы, я не знаю.

На счет названия: ничего точно сказать не могу, но если просто задуматься над дословным переводом "Очистка плаванья(или поплавков)" наводит на мысль, что Clearing floats значит "очистка от поплавков". С точки зрения браузера это фактически превращение ранее плавающих блоков в статичные, это подходит под фразу "очистка от поплавков". Но врядли кому нибудь эта фраза окажется понятной, а по текущему названия я сразу догодался о чем именно речь, логичнее будет его оставить, чем искать более точный дословный перевод :)

А вообще "Clear для плавающих блоков тоже понятно"

В сайдбаре раздел "Ошибки на сайте" не двоиться?

Уверен, что почти у всех более-менее известных авторов блогов посвещенных css и xhtml, найдется похожее решение.

"Элемент BR принудительно обрывает (оканчивает) текущую строку текста.
Для визуальных ПА атрибут clear может использоваться для определения того, как разметка, следующая после элемента BR, обтекает другие всплывающие влево или вправо объекты, или начинается внизу после этих объектов."

Попробуйте проверить эту конструкция валидатором, используя любой Strict DOCTYPE, атрибут clear не валиден.