vs 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

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 2

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

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 4

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

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.