Clear and collapsing margins

HTML:

<div class="wrap">
	<div class="A">
		<div class="B">
		</div>
	</div>
	<div class="C">
	</div>
</div>
CSS:

.wrap {
background:yellow;
}

/* Change in testcases 2a/b */
.two .wrap {
border:1px solid;
}

.A {
margin-bottom:50px;
}

.B { 
height:100px;
float:left;
background:red;
}

.C {
margin-top:125px; 
clear:left;
}

/* 
Bug in FF?
looses clearing with any value equal to/greater than B's height
*/
.bug .A {
margin-bottom:150px;
}

  1. Collapsing margins with containing block

    Testcase 1a
    Element A in normal flow (margin-bottom:50px) contains floated element B (height:100px).
    Following element C clears (margin-top:125px).
    What happens?
    Bottom margin of A (zero height) collapses with the containing block's top margin, results in 50px top margin for containing block.
    Top margin of clearing element /would/ collapse through previous sibling's and containing block's margin, therefore margin gets lost.
    Clearance of 100px (C's height)
    A: margin-bottom:50px
    B: float in A
    height:100px
    C: clear:left + margin-top:125px
    Testcase 1b
    Testcase 1 + bottom margin of element A changed to 150px.
    What happens?
    Same as 1a, but results in 150px top margin for containing block.
    Firefox loses clearing? (Tested: Win XP SP2: 2.0.0.7 + Minefield 3.0a9pre)
    A: margin-bottom:150px
    B: float in A
    height:100px
    C: clear:left + margin-top:125px

  2. No collapsing with containing block

    Testcase 2a
    Testcase 1a but containing element's border prevents margin collapsing.
    What happens?
    margin-bottom:50px of A collapses with C's margin-top:125px, results in 125px
    No clearance needed.
    A: margin-bottom:50px
    B: float in A
    height:100px
    C: clear:left + margin-top:125px
    Testcase 2b
    Testcase 2a but bottom margin of element A changed to 150px.
    What happens?
    margin-bottom:150px of A collapses with C's margin-top:125px, results in 150px
    No clearance needed.
    A: margin-bottom:150px
    B: float in A
    height:100px
    C: clear:left + margin-top:125px