Удаляем лишний отступ в IE при использовании clear: both

Часто, когда мы используем плавающие блоки, для того, чтобы нижеследующий блок расположить под ними без смещения вверх за счет флоатов, мы создаем дополнительный html-элемент, к которому применяем свойство clear: both, например, так, как это сделано в трехколоночном макете с помощью CSS:

.clear {clear: both}

В ряде случаев между самым высоким плавающим блоком и нижеследующим не плавающим (например, между контентом и футером) в браузере Internet Explorer, в том числе и в 7-й версии, появляется лишний отступ, образованный этим самым свойством clear: both. Грешит, я так полагаю, именно IE, поскольку в современных браузерах (Opera, FireFox, Safari) данные блоки отображаются так, как надо, т.е. без лишних “не задуманных” отступов.

Сей эффект бывает особенно заметен в случае, если к описанным блокам заданы видимые бордюры, различные изображения или разноцветные бэкграунды.

Вот реальный пример с лишним отступом в IE. Здесь на его наличие повлиял margin, заданный для хэдера страницы (кстати, привет Trifler‘у, этот пример я выцепил в одном из твоих шаблонов :).

Чтобы устранить данный недочет в Internet Explorer, нужно задействовать всего пару дополнительных CSS-правил. Решение очень простое — указываем клир-контейнеру нулевую высоту и скрываем его переполнение:

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

В результате IE “пляшет” по нашим правилам.

* * *

На сайте «Personal Turkey» вы можете подобрать и купить недвижимость в Турции. Одно дело — снимать номер в отеле, совсем другое — быть владельцем недвижимости в этой замечательной южной стране.