br clear="all" vs div class="clear"

Суббота, 26 Сен 2009 22:17

Топик на заметку верстальщику. Если для того, чтобы правильно считалась высота контейнера, содержащего float элементы, вы все еще кладете в конец этого контейнера <div class="clear">, то хочу предложить вам намного более простой и удобный вариант с использованием <br clear="all" />, который абсолютно валиден, и делает абсолютно тоже, но записывается и читается затем в коде намного легче. Вот уже несколько месяцев, как я заменил используемый по жизни .clear с описанием через css на <br clear="all" />, и уверенно могу сказать, что никаких недостатков по сравнению с первым методом у него нет (тег прекрасно понимается ИЕ6). Итого нам не нужно прописывать в css бесконечные стили на класс .clear

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

И еще кучу всего, что обычно пишут верстальщики, а достаточно в конец контейнера пололжить <br clear="all" />. Имхо, код становится намного более красивым и читаемым.

Update 14.12.2010 Как оказалось, разница все же куда более существенна. Дело в том, что <br clear="all" /> при некоторых обстоятельствах создает своим присутствием попросту пустую строку, обнулить которую не представляется возможным. Поэтому все же рекомендую пользоваться этим тегом аккуратно, он неуниверсален и в некоторых ситуациях не сможет заменить <div class="clear">, который с легкостью обнуляется. В своей практике я перешел на повсеместное использование техники .clearfix, позволяющей правильно считаться высоте блока-родителя плавающих контейнеров и <div class="clear"> в некоторых случаях.

Теги: 

http://blogto4ka.ru

RSS комментариев

8 комментариев Комментировать

  1. Антон пишет:

    19 мая 2010 в 20:01 Reply to this comment

    1

    Тег не валиден в XHTML 1.0 Strict и XHTML 1.1. Предпочитаю использовать старый проверенный

  2. Эрик пишет:

    11 Ноя 2010 в 14:08 Reply to this comment

    2

    Спасибо, ты мне вернул пару часов жизни

  3. Григорий пишет:

    25 Янв 2011 в 22:14 Reply to this comment

    3

    br {clear:left} — чем не вариант?

  4. Алексей пишет:

    03 мая 2011 в 20:06 Reply to this comment

    4

    ovewrflow: hidden в родительском элементе.

    пора уже всё в стили закладывать, а не плодить устарелые методы.

  5. Эрик пишет:

    04 мая 2011 в 7:02 Reply to this comment

    5

    @Алексей: Расскажи подробней. Если можешь с примерами.

  6. Алексей пишет:

    04 мая 2011 в 16:32 Reply to this comment

    6

    сошлю сюда

    quirksmode.org/css/clearing.html

    думаю сами разберетесь, если нет пишите

  7. psha пишет:

    21 Дек 2011 в 17:39 Reply to this comment

    7

    ништяк, спасибо огромное.

  8. Леонид пишет:

    06 Мар 2012 в 7:13 Reply to this comment

    8

    как вариант работает_)

Оставьте свой комментарий о материале
(Комментарии со ссылками попадают на модерацию. Остальные не попадают, но я могу удалять те, которые посчитаю бесполезными, не несущими смысловой нагрузки)