vs in clearing

Question

What is the difference

vs

??

Al

Answer 1

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

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

Answer 2

You could also use..

---

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

Answer 3

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

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 5

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 6

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.