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. =)
clear: both
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 clear
attribute to them specifies that a certain side of that floated div shouldn't have certain floated elements beside it:
#div1, #div2, #div3 {display: block; float: left;}
#div2 {clear: left;}
Instead of the divs lying horizontally, div2 and div3 will now lie in a row below div1. This is because you specified that div2's left side shouldn't have left floated elements beside it.
(In truth, the clear: right
declaration stumps me. So you need to have someone else explain that)
Specifying clear: both
is like saying: I don't want floated elements on BOTH sides of this element. So divs 1, 2, & 3 will lie on different rows altogether.
when it is just margin without left or right
The margin
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:
margin-top: 1.0em;
margin-right: 2.0em;
margin-bottom: 3.0em;
margin-left: 4.0em;
... but it's shorter. =) The …