Как использовать класс .clearfix?

Я думаю, что неправильно понимаю концепцию класса .clearfix. Может быть, кто-нибудь может мне помочь.

Я ищу способ использовать float и clear, чтобы не испортить мою разметку. Так что я подумал, что именно здесь .clearfix можно использовать.

Внутри пустого H5BP-проекта моя разметка выглядит так:

    <div></div>
    <div></div>
    <div class="clearfix"></div>
    <div></div>
    <div></div>
    <div class="clearfix"></div>
    <div></div>
    <div></div>
    <div class="clearfix"></div>

Ниже результат. Я ожидал Tic Tac Toe-Field, хотя. Может кто-нибудь сказать мне:

1. Как я могу достичь своей цели и
2. Для чего действительно может использоваться класс .clearfix?