I'm having an issue where a margin that is being applied to a div seems to also be getting applied to the document body *in FireFox only*. 

Some googling around the internet seems to make reference to collapsing margins, and while that may be the case, I don't think I fully understand what's going on. 

I've created an example <http://jsfiddle.net/davidwkennedy/3BQrw/> (view in FF, and then any other browser to compare).

```
   <body>
  <form id="form1" action="nothing">
     <div>
        <div>
           <p style="float:left; border:solid 1px red">Why is this text not anchored at the top of the page?</p>
           <div style="clear:both;"> </div>
        </div>
     </div>
     <div style="margin-top:100px;">
        <p>hello world</p>
     </div>
  </form>

```

Could someone please help me understand what's going on? 

Thanks

(edit: it's been a while since I asked this, but I wanted to update with the FireFox version. I don't recall what I was using when I originally wrote this, but this issue is still occurring in 26.0)