I was going to be a pompous ass and point you to the W3C site... but it's written in Martian so I'll try to humanize it here. =)
[quote] clear: both [/quote]
If you have a couple of floated elements, say div1, div2, and div3, their arrangement will depend on how much content each div has.
For example, if all divs have a simple "Hello world" in them, most likely, the divs will lie horizontally beside each other on a page. Adding a [icode]clear[/icode] attribute to them specifies that [i]a certain side[/i] of that floated div shouldn't have [i]certain floated elements[/i] beside it:
Instead of the divs lying horizontally, div2 and div3 will now lie in a row [b]below div1[/b]. This is because you specified that div2's left side shouldn't have left floated elements beside it.
(In truth, the [icode]clear: right[/icode] declaration stumps me. So you need to have someone else explain that)
Specifying [icode]clear: both[/icode] is like saying: [i]I don't want floated elements on BOTH sides of this element.[/i] So divs 1, 2, & 3 will lie on different rows altogether.
[quote]when it is just margin without left or right[/quote]
The [icode]margin[/icode] property is a shorthand for the top, right, bottom, left margin properties. It can take a maximum of four values:
margin: 1.0em 2.0em 3.0em 4.0em;
Is like saying:
... but it's shorter. =) ...