Clearing floats with overflow: auto

dabblet.css

/**
 * Clearing floats with overflow: auto
 */
 
.bg {
  background: red;
}
.cf {
  overflow: auto;
}
.left {
  float: left;
  height: 100px;  
}
.right {
  float: right;
  height: 100px;
}

html {
  font-family: sans-serif;  
}

dabblet.html

<h2>You should see a red box if it works:</h2>
<div class="bg cf">
 <div class="left"></div>
 <div class="right"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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