css - Margin collapse and clearance

Question

I am reading the W3C specs and I really don't understand that one :

If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

Anyone could explain or JSFiddle it for me ?

Answer 1

Yes. Take a look at the below snippet ^[JSfiddle] in either Firefox or IE.1

.case { width:200px; background-color:yellow; }

.container { background-color:lightblue; margin-bottom:70px; padding-top:0.01px; }
.preface { float:left; height: 58px; width: 100px; border: 1px solid red; }
.one .intro { clear: left; margin-top:60px; }
.two .intro { clear: left; margin-top:59px; }

<div class="case one">
  <div class="container">
    <div class="preface">
      lorem ipsum
    </div>
    <div class="intro"></div>
  </div>
  after
</div>
<hr>
<div class="case two">
  <div class="container">
    <div class="preface">
      lorem ipsum
    </div>
    <div class="intro"></div>
  </div>
  after
</div>