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

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

You could also use..

---

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

Answer 5

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 6

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