<br/> против <div /> при расчистке

Question

Какая разница

<br style="clear:both;"/>

против

<div style="clear:both;"/>

??

Также я подумал

<div style="clear:both;"/> 

- хороший способ очистки, но

<div style="clear:both;"> </div>

правильный путь?

Answer 1

Разница в том, какие другие атрибуты стиля вы унаследуете. Конечно, одно наследуется от <br>, а другое от <div>.

Обычно <div> не имеет особых последствий для стиля, кроме display:block, тогда как <br> подразумевает разрыв строки и некоторую ненулевую высоту (связана с текущей высотой шрифта).

Но часто (например, с помощью вездесущей техники css-reset) приблизительно нет разницы. Поэтому выберите тот, который имеет наиболее смысловой смысл.

[UPDATE]

Для закрытия тегов используйте <div></div>, а не <div/>. Вот почему .

Спасибо комментаторам Себастьяну Селису и ephemient за исправление "закрывающего тега".

Answer 2

Это стиль, который я использую для очистки:

.Clear { clear: both; height: 0; overflow: hidden; }

Использование:

<div class="Clear"></div>

Это не займет дополнительного места на странице, так как высота равна нулю.

У Internet Explorer странная идея о том, что содержимое каждого элемента должно быть не менее одного символа, и другая странная идея о том, что каждый элемент должен иметь такую ​​же высоту, как его содержимое. Использование overflow: hidden не позволяет содержимому влиять на размер элемента.

Answer 3

Я бы использовал:

<p class="clear"></p>

и в вашем CSS просто добавьте:

.clear {clear:both; height:0px; font-size:1px;}
/* font-size:0px; does not work well on IE7, it works in IE8 and all other browsers. */ 

Вы можете сказать, почему бы и нет:

<br class="clear">

Обычно я использую класс clear после float:left элементов, а при использовании <br> вместо <p> они не работают должным образом в IE7, они не очищаются должным образом, Safari4 / Chrome добавляет ненужное пространство. У меня не было времени лучше изучить этот вопрос, так что это может быть просто ошибкой в ​​моем дизайне, все, что я знаю, <p> в этом случае выглядит более кросс-браузерным.

Answer 4

Единственное различие, о котором я могу думать, это то, что <div> является элементом уровня блока, а <br> является элементом уровня строки.

Но <br> на самом деле ведет себя как элемент уровня блока, за исключением того факта, что на него влияют свойства line-height и font-size CSS.

По моему мнению, <br style="clear:both;"/> - более правильный способ поставить разрыв строки на вашей странице, главным образом потому, что он широко принят и легко идентифицируется другими, кто может быть не знаком с вашей разметкой.

Answer 5

Ну, нет никакой разницы, в зависимости от унаследованных стилей.

Эта ссылка говорит еще кое-что и рекомендует: http://www.positioniseverything.net/easyclearing.html

Answer 6

Вы также можете использовать .. <ч /> с добавленными правилами CSS он может выполнять свою работу и служит этой цели.

Answer 7

Все методы плохие. Используйте CSS, чтобы изменить внешний вид вашей страницы. Есть много способов сделать то же самое с помощью CSS. Такие как предоставление "переполнение: скрытый"; на родительском элементе.

Answer 8

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

Answer 9

.clear {ясно: оба; размер шрифта: 0 пикселей; высота строки: 0px; высота: 0px; переполнение: скрытый; }

Использование

"br" иногда имеет побочные эффекты в браузерах Opera и IE, поэтому вам следует избегать его использования

Answer 10

Вы должны быть осторожны с / на теге.

У меня были проблемы с косой чертой в теге , завершаемой способом Хотя большинство синтаксических анализаторов, поддерживающих xml, могут принимать и то и другое.

должен быть прекращен на