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

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

Комментарии (24)

  1. можно писать проще
    .clear {clear: both; font-size:0;}
    :)

  2. Неа, ваш способ не помогает. Возможно, он в некоторых случаях и убирает отступ, но решение не универсальное. Можете прямо на моем примере проверить.

  3. так рабочий способ или нет, лезть мне в код лишний раз?

  4. Мой конечно рабочий. Пример-то на что дан?

  5. Привет, Дима.

    Сейчас, тоже перехожу на этот метод.
    Победить IE не просто ;)
    Но еще жив курилка ;)

  6. Дмитрий, добрый день! Может я чего не то делаю, но по кнопочке «Читать через Яндекс» твой фид в мою ленту не добавляется категорически. Я-лента съела только фидбурнеровский фид. Но это так, лирика :) А теперь по теме — спасибо за разжеванную кашу, буду есть :) Если не против, есть пара вопросов по резиновой верстке. Хочу отцентровать двухколоночную резину. В ФФ и ИЕ7 все работает, но тухнет на шестом ИЕ — он растягивает на всю ширину страницы. Башку сломал уже, что с ним делать. Если не лень, посмотри, плиз, вот на эту страничку — http://tokenoman.ru/layout.html Там есть еще одна печаль с шестым эксплорером, но это уже так, мелочи :) Спасибо! ;)

  7. Привет, Бомж2 :)

    Я-лента съела только фидбурнеровский фид.

    Так это нормально :), мой фид же через него как раз и пропускается, поэтому идет редирект.

    По поводу всего остального отвечу примерно вечером в воскресенье, до этого времени меня не будет.

  8. Обычно делают так .clear {clear: both; font-size:0;line-height:0}

  9. Yuriy, я ж говорю — не работает этот способ. Проверьте на моем примере.

  10. Да, действительно, в Вашем примере не работает. Но тогда есть еще один способ :) Для этого необходимо div’ы content и right взять в div «обертку» и ему задать width:100% и overflow:hidden. Тогда необходимость в div’е c clear:both отпадает и отступа тоже нет.

  11. Yuriy, в макетах, которые я верстаю, content и right как раз всегда обернуты в див со 100% шириной, но overflow для него я никогда не применял, поэтому спасибо за метод, обязательно попробую ;).

  12. О, сработало! Вчера весь вечер промучилась, не знала что делать, а тут за минуту помогло. Спасибо большущее!

  13. Пожалуйста, Existenciya.

  14. .clear-invisible {clear: both; height: 0; overflow: hidden; font-size: 0; padding: 0px; margin: 0px; line-height: 0; width: 100%}
    *+html .clear-invisible {clear: none}
    * html .clear-invisible {clear: none}

    У кого не сработали все предыдущие способы — даю самый рабочий :)
    Для IE срабатывает комбинация width: 100% и clear: none (эмулируя clear: both)

    Причем у меня все вышеописанные способы не срабатывали.

  15. antoxa! Спасибо огромное! Я уж не чаял надежды победить ослов… Причем описанный dimox’ом метод меня всегда выручал, а тут столкнулся с необходимостью, после каждого второго дива делать clear… И никак ослы не хотели меня понять (перед первым clear делали отступы, как будто у него маржин или паддинг прописан, а остальные как надо складывали..впрочем это я уже разошелся на радостях.. спасибо) =)

  16. перед первым clear делали отступы, как будто у него маржин или паддинг прописан, а остальные как надо складывали

    Что-то знакомое. Мне однажды показывали подобный глюк. А вот width: 100% и clear: none никогда не пробовал, поэтому теперь буду иметь в виду. antoxa, спасибо! ;)

  17. Спасибо огромное за статью.
    Сделала сайт по шаблону и движку Joomla и старый шаблон меняла под свой дизайн. Просто измучилась с различным отображением в других браузерах и IE. А в коде уже был прописан .clear {
    clear: both;}, я вообще не понимала зачем это прописано. Добавила туда то, что вы советуете и моя проблема с различным отображением в браузерах решилась.
    Спасибо!!!

  18. неховайсятополь
    13 лет 2 месяца назад

    я вот для себя вывел самое рабочее решение…пока не подводило

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

  19. Спасибо-попозже потестирую)

  20. Денис Шутько
    13 лет назад

    Вот универсальный способ:
    =========CSS===========
    .clearbar {
    clear:both;
    font-size:0;
    line-height:0;
    border:none;
    height:0;
    }
    =======================
    ========HTML==========
     
    =======================

    ВАЖНО!
    Если написать просто (без пробела), то в ie6 высота будет все равно 2 пиксела :)))

    • Вот универсальный способ:

      Был замечено, что line-height:0; вызывает в IE8 однопиксельный пробел все-таки, в то время как в 6-7 нормал. Удалил стало везде хорошо. Может конечно специфика мудреной верстки где применял это была такая, но тем не менее.