CSS2.1 8.3.1 Collapsing margins

dabblet.css

/**
 * CSS2.1 8.3.1 Collapsing margins
 */

div { margin: 50px; background: #000; color: #fff; }
p { margin: 10px 0; background: rgba(128,255,192,.2); }
p+p { margin: 20px 0 }
p+p+p { margin: 30px 0 }
p+p+p+p { margin: 40px 0 }
p+p+p+p+p { margin: 60px 0 }
span {
	float: left;
	background: rgba(255,255,127,.8);
	color: green;
	width: 90px;
	height: 90px;
	margin: 0 2px;
	box-shadow: 0 0 1px rgba(255,255,192,.8);
}
.clear { clear: left; }

dabblet.html

<div>
	<p><span>Float в непустом блоке</span>Первый див</p>
	<p><span>Float из пустого блока 1</span></p>
	<p class="clear0"><span>Float из блока 2 (с клиренсом)</span></p>
	<p><span>Float из пустого блока 3</span></p>
	<p><span>Float из пустого блока 4</span></p>
</div>
<div>Второй див</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}