<br/> vs <div/> in clearing - html

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

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 3

I would use:
<p class="clear"></p>
and in your CSS just add:
.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. */
You might say, why not:
<br class="clear">
I typically use the clear class after float:left elements, and when using the <br> instead of the <p> they don't seem to work well on IE7 they don't clear as supposed, and on Safari4/Chrome they add unwanted space. I didn't have time to investigtae better this one, so it might be just an error on my design, all I know the <p> in this case seem to be more cross-browser.

Answer 4

Well, there is no difference, depending on inherited styles.
This links says some more, and recommends :
http://www.positioniseverything.net/easyclearing.html

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 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 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

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 10

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 11

<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 12

You could also use..
with added CSS rules it can do the job, and it serves this purpose.