Problema com a altura de elementos float, use clearfix

Estudando um pouco sobre a flutuação dos elementos com css no site http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/ , deu algumas dicas importantes. Uma que me chamou a atenção foi sobre o problema de que o elemento pai de elementos float não engloba o tamanho dos elementos filhos.

Exemplo: Como você pode ver no exemplo abaixo, o a borda do elemento div não calculou corretamente a altura.

http://dabblet.com/gist/2522877

Como você pode resolver isto? Usando o Clear Fix. Segue o exemplo abaixo:

http://dabblet.com/gist/2522883