Clear Fix Demo

dabblet.css

/**
 * Clear Fix Demo
 */
html {
	font-family: sans-serif;
	font-size: 150%;
}

.container {
	background: #aaddaa;
}

.float {
	border: 1px solid red;
	width: 30%;
	padding: 0.5em;
	text-align: center;
	color: blue;
	background: #ffeeee;
	margin: 10px;
	float: left;
}
.box3 {
	/*clear: both;*/
}

/*method 1*/
br.clear {
	clear: both;
}

/*method 2*/
.container {
	/*overflow: auto;*/
}

/*method 3*/
.clearfix:after {
	content: '';
	clear: both;
	display: block;
}
/*Bullet-proof hack: http://nicolasgallagher.com/micro-clearfix-hack/*/

dabblet.html

<div class="container">
	<div class="float box1">1</div>
	<div class="float box2">2</div>
	<div class="float box3">3</div>
	<div class="float box4">4</div>
	<p>Content inside</p>
</div>
Content below

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}