hr clear против div clearЧто лучше?

Question

Это общий вопрос и что-то, что меня осенило и, казалось, имело смысл. Я видел, как многие люди используют очистку div <div class="clear" /> и знают, что это иногда осуждается, поскольку это дополнительная разметка. Я недавно начал использовать <hr class="clear" />, так как это выглядит как фактическое назначение.

Обе ссылки на курс: .clear{clear:both;}

Я хочу получить мнение, если тег hr имеет больше смысла, чем div для очистки содержимого

Answer 1

Согласно спецификации HTML5, элемент hr представляет тематический разрыв на уровне абзаца (изменение сцены в истории или переход к другой теме в разделе справочника), в то время как элемент div универсальный контейнер для содержимого потока, который сам по себе ничего не представляет. Поэтому я не вижу оправдания для выбора одного над другим для размещения поплавков.

Однако, есть кое-что, что вы должны иметь в виду. Прочитайте следующий отрывок из статьи Эрика Мейера Содержит поплавки :

div.item {border: 1px solid; padding: 5px;}
div.item img {float: left; margin: 5px;}
div.item hr {display: block; clear: left; margin: -0.66em 0;
    visibility: hidden;}

Отрицательные поля сверху и снизу иметь общий эффект закрытия пространство, которое занимает час. Тем не менее, этот эффект не является точным, и не обязательно идентичны по всему браузеры. Полу таинственная природа горизонтальных правил затрудняет точно предсказать, что произойдет. Эффективная высота часов может быть ноль или небольшая положительная сумма, или даже отрицательная высота

Поэтому в ситуациях, когда нужен точный очищающий эффект, авторы могут использовать div вместо hr создать очищающий эффект.

Если это не имело для вас смысла, посмотрите на эту скрипку и обратите внимание на пространство под плавающим div (IE8).

Тем не менее, есть и другие способы сдержать поплавки и избежать одновременного использования структурных хаков:

1. Перемещение контейнера: может вызвать проблемы с компоновкой.
2. Использование .container { overflow: auto; }: если содержимое превышает границы контейнера, вы увидите полосу прокрутки.
3. Использование .container { overflow: hidden; }: если содержимое выходит за границы контейнера, оно будет скрыто.
4. Clearfix : Используется при сбое 2 и 3.

Answer 2

Лучшее решение - не использовать какие-либо элементы и использовать overflow:hidden с триггером hasLayout для IE или clearfix.

Какой метод clearfix?

Answer 3

Оба метода старомодны.Последний трюк заключается в использовании свойства overflow для контейнера с плавающими элементами.

Если, например, у вас есть:

<div id="wrapper">
    <div class="float">text here</div>
    <div class="float">text here</div>
</div>

с float классом float:left, тогда этолучше использовать overflow:hidden или overflow:auto, чем <div style="clear:both"></div> или метод hr.

Демо: http://jsfiddle.net/vALSL/

Подробнее здесь: http://www.quirksmode.org/css/clearing.html

Answer 4

Я предпочитаю подход только CSS.Что касается семантики между div и hr, я не уверен, что думаю, что hr имеет больше смысла в использовании, чем div.Тег hr предназначен для создания «тематического разрыва на уровне абзаца».

http://dev.w3.org/html5/markup/hr.html

Решение только для CSS:

http://www.positioniseverything.net/easyclearing.html

<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
   }  /* Only IE can see inside the conditional comment
         and read this CSS rule. Don't ever use a normal HTML
         comment inside the CC or it will close prematurely. */
</style>
<![endif]-->