Удаляем лишний отступ в 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» вы можете подобрать и купить недвижимость в Турции. Одно дело — снимать номер в отеле, совсем другое — быть владельцем недвижимости в этой замечательной южной стране.
Комментарии (24)
Огромное спасибо, помогло
Спасибо,
способ работает!
overflow:hidden; само по себе уже очищает текущий контекст, без всяких clear