<br/ "> vs <div/" > в расчистке
В чем разница
<br style="clear:both;"/>
против
<div style="clear:both;"/>
??
Кроме того, я думал,
<div style="clear:both;"/>
- хороший способ очистки, но
<div style="clear:both;"> </div>
надлежащим образом?
Ответы
Ответ 1
Разница заключается в том, какие другие атрибуты стиля вы наследуете. Конечно, наследуется от <br>
, а другой - от <div>
.
Обычно <div>
не имеет специальных импотенций стиля, кроме display:block
, тогда как <br>
подразумевает разрыв строки и некоторую ненулевую высоту (связанную с текущей высотой шрифта).
Но часто (например, с помощью вездесущей методики css-reset
) нет никакого различия. Поэтому выберите тот, который делает наиболее смысловой смысл.
[ОБНОВЛЕНИЕ]
Для закрытия тегов используйте <div></div>
, а не <div/>
. Вот почему.
Благодаря комментариям Себастьян Селис и ephemient для исправления "закрытия тега".
Ответ 2
Это стиль, который я использую для очистки:
.Clear { clear: both; height: 0; overflow: hidden; }
Использование:
<div class="Clear"></div>
Это не займет лишнего места на странице, так как высота равна нулю.
В Internet Explorer странная идея, что содержание каждого элемента должно быть как минимум на один символ, а другая странная идея, что каждый элемент должен быть таким же высоким, как и контент. Использование overflow: hidden
не позволяет содержимому влиять на размер элемента.
Ответ 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>
в этом случае, похоже, более кросс-браузер.
Ответ 4
Ну, нет разницы, в зависимости от унаследованных стилей.
Эти ссылки говорят еще несколько, и рекомендует:
http://www.positioniseverything.net/easyclearing.html
Ответ 5
Единственное отличие, о котором я могу думать здесь, это то, что <div>
является элементом уровня блока, а <br>
является элементом линейного уровня.
Но <br>
фактически ведет себя как элемент блочного уровня, за исключением того, что он выполняется с помощью свойств line-height
и font-size
CSS.
По-моему, <br style="clear:both;"/>
- это более правильный способ поместить разрыв строки на вашей странице, главным образом потому, что он широко признан и легко идентифицируется другими, которые могут быть не знакомы с вашей разметкой.
Ответ 6
Если вы пишете (действительный) XHTML, вам не нужно использовать закрывающий тег, но самозакрывающиеся теги div не работают во всех браузерах, поэтому вы все равно должны его использовать. т.е. ваш пример:
`<div style="clear:both;"> </div>`
Это действительный XHTML (см. html vs xhtml), но не работает во всех браузерах, поэтому вы должны придерживаться вышеуказанного:
<ы > <div style="clear:both;" />
С >
Кроме того, для того, что стоит тег <br>
, устарел в пользу тега <line>
(см. запись w3.org на <br/>
тег)
Ответ 7
Это то, что я всегда использую:
<style type="text/css">
.clearing {
height: 0;
line-height: 0;
font-size: 0;
clear: both;
overflow:hidden;
}
</style>
И где мне нужна очистка:
<div class="clearing"></div>
Вы также можете быть заинтересованы в контейнерах для самоочистки: http://www.positioniseverything.net/easyclearing.html
РЕДАКТИРОВАТЬ: добавлено "переполнение: скрытое" по предложению с другого плаката ответа.
Ответ 8
Вам нужно быть осторожным с тегом/на теге.
У меня были проблемы с косой чертой на <script> тег, завершаемый < script language = "javascript" src= "MyScripts.js" / > путь. Хотя большинство синтаксических анализаторов, совместимых с xml, будут принимать оба.
<script> должен заканчиваться на </ script >
Ответ 9
.clear {clear: both; font-size: 0px; line-height: 0px; высота: 0px; переполнение: скрытый; }
Использование
"br" иногда имеет побочные эффекты в браузерах Opera и IE, поэтому вам следует избегать использования
Ответ 10
<br />
является встроенным элементом, где <div>
является блочным элементом. Во всяком случае, я лично предпочитаю использовать <hr class="clear">
, я считаю, что он более семантически адекватен.
Ответ 11
Все методы плохие. Используйте CSS, чтобы изменить внешний вид вашей страницы. Есть много способов сделать то же самое с CSS. Например, "переполнение: скрытое"; на родительский элемент.
Ответ 12
Вы также можете использовать..
с добавленными правилами CSS, он может выполнять эту работу, и он служит этой цели.