class "left_main" の内容
width: 330px;
height: 350px;
margin-top: 20px;
margin-right: 20px;
float: left;
clear を指定した要素の margin-top が効いてない？
まず、フロートされたボックスは、通常フローから外される。
なので本来（通常フロー）なら、footer は header のすぐ下に配置されるはず。
でもフロートの厳格ルールの中には、 「clear したボックスは、フロートしたボックスよりも必ず下に配置される」とある。
その決まりの為に無理無理クリアランスという余白が自動的に追加されている。（という理解でいいんですかね？ 自信ない）
で、
footerのmargin-top はフロートボックスとの余白に対してのものではなく、通常フロー同士のヘッダーとフッターの間の余白に対してのものである。
なので … たとえばfooter" の margin-top: 300pxなどとフロートボックスよりも高いマージンを指定すれば、キチンとマージンが効く事を確認でる。 ですが、普通はそうはせずに下記のようにする。
class "left_main" の内容
width: 330px;
height: 350px;
margin-top: 20px;
margin-right: 20px;
float: left;
margin-bottom: 20px;
フッターとフロートボックスの間に余白を作りたい場合は、
フロートしたボックス（#main、#sidebar）に margin-bottom を指定すれば OK。
フロートしたボックスのマージンは相殺されないので、margin-bottom: 20 px とすれば、20px 分の余白ができる。