I've encountered a strange issue where adding an element after a floated element, makes the bottom margin of the element before the floated element disappear.

I figured this might be an issue with IE8 RC1, but if I use regular DOM methods instead of JQuery, the margin does not disappear.

My test-case HTML/CSS looks like this...

css...

<pre>#p1 {margin:100px 0;border:1px solid #000;}

#p2 {float:left;}

#p4 {margin:50px 0;}

body * { background-color: yellow; }</pre>

html...

<pre><p id="p1">1: Some text with a 100px top/bottom margin</p>

<p id="p2">2: floated element, new element added after this one</p>

<p id="p4">3: random line of text</p></pre>

jquery...

<pre>$('<p id="p3">INSERTED TEXT</p>').insertAfter("#p2");

or

$("#p2").after('<p id="p3">INSERTED TEXT</p>');</pre>

A few observations...

• If you drop the "border" from #p1, #p1s' margin does not disappear. Further, I found that padding also triggers the disappearing margin.
• If #p2 is not floated, #p1s' bottom margin does not disappear.
• If you apply the border via javascript (ie $(elem).css("border","...")), the bottom margin does not disappear.
• If #p4 is removed, #p1s' bottom margin does not disappear.

I've attached a zip with test files.