htmlの中での class="clearfix"

何だか cssについてはよくわかっていない。
clearfixについてのこの説明は違っていると思うけど、まぁ、使い方の方向的にはこんなものだと思う。

cssの中でfloatを指定した場合。

例えば
float: left;
の時、htmlで、左に大きい画像、右に小さい画像が並んだ後で、その後のテキストは右に回り込んでしまう。
つまり、大きい左画像の右下と右の小さい画像の下にスペースができるが、そのスペースに文字が回り込んでしまう。
それを避けたいときに
<div id="main-image" class="clearfix">
と、clearfixを使う。