vs in clearing

Question

What is the difference

vs

??

Al

Answer 1

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 2

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

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 4

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

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)