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

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

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

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

  2. 2

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

  3. 3
    MKAAA

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

  4. 4

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

  5. 5

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

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

  6. 6

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

  7. 7

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

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

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

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

  8. 8
    Yuriy

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

  9. 9

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

  10. 10
    Yuriy

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

  11. 11

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

  12. 12

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

  13. 13

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

  14. 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. 15
    Steinebel

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

  16. 16

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

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

  17. 17
    Юлия

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

  18. 18
    неховайсятополь

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

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

  19. 19
    Алекс

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

  20. 20
    Денис Шутько

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

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

    • 21
      M.O.Z.G

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

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