<br/> vs <div/> in clearing

Question

What is the difference

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

vs

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

??

Also, I thought

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

is a good way of clearing, but is

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

a proper way?

Answer 1

The difference is which other style attributes you inherit. Of course one inherits from <br> and the other from <div>.

Typically <div> has no special style implications other than display:block whereas <br> implies a line-break and some non-zero height (linked to the current font height).

But often (e.g. with the ubiquitous css-reset technique) there is approximentally no difference. Therefore, pick the one that makes the most semantic sense.

[UPDATE]

For closing tags, use <div></div> and not <div/>. Here's why.

Thanks to commentors Sebastian Celis and ephemient for the "closing tag" correction.

Answer 2

Well, there is no difference, depending on inherited styles.

This links says some more, and recommends : http://www.positioniseverything.net/easyclearing.html

Answer 3

If you're writing (valid) XHTML you don't need to use the closing tag, but self closing div tags don't work in all browsers, so you should still use it. ie your example:

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

This is valid XHTML (see html vs xhtml) but doesn't work in all browsers, so you should stick with the above:

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

also, For what it's worth the <br> tag is deprecated in favor of the <line> tag (see w3.org entry on the <br/> tag)

Answer 4

This is what I always use:

<style type="text/css">
.clearing {
height: 0;
line-height: 0;
font-size: 0;
clear: both;
overflow:hidden;
}
</style>

And where I need a clearing:

<div class="clearing"></div>

You may also be interested in self-clearing containers: http://www.positioniseverything.net/easyclearing.html

EDIT: Added "overflow:hidden" per the suggestion from another answer poster.

Answer 5

The only difference that I can think of here is that <div> is a block-level element, while <br> is an inline-level element.

But <br> actually behaves somewhat like a block-level element, other than the fact that it is effected by line-height and font-size CSS properties.

In my opinion, <br style="clear:both;"/> is the more proper way to put a line-break in your page, mostly because it is widely-accepted and easily identifiable by others who may not be familiar with your markup.

Answer 6

This is the style that I use for clearing:

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

Usage:

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

This will not take up any extra space in the page as the height is zero.

Internet Explorer has a strange idea that the content of each element has to be at least one character high, and another strange idea that each element should be as high as it's content. Using overflow: hidden keeps the content from affecting the size of the element.

Answer 7

You do need to be careful about the / on the tag.

I had problems with the slash on the <script> tag terminated by <script language="javascript" src="MyScripts.js" /> way. Although, most xml compliant parsers would accept both.

<script> has to be terminated by </script>

Answer 8

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

Usage

"br" sometimes has side-effects in Opera and IE browsers, so you should avoid using it

Answer 9

<br /> will be deprecated in HTML5 so it's best to avoid using them wherever possible. If you need an element to clear previous floated elements then it's best to put it inside a div that has clear both rather than adding an empty <br /> above it. A div is more semantically correct.

Answer 10

<br /> is an inline element, where as <div> is a block element. Anyway, I personally prefer to use <hr class="clear">, I feel it is more semantically adequate.

Answer 11

All methods are bad. Use CSS to change the appearance of your page. There are many methods to accomplish the same with CSS. Such as giving "overflow: hidden;" on the parent element.

Answer 12

You could also use..

---

with added CSS rules it can do the job, and it serves this purpose.