フロートを解除する方法にはいくつかある。

clear: both;

フロートを解除したい位置のブロックレベル要素に指定する。

overflow : hidden;

フロートを含んでいる親要素に、overflow : hidden; もしくは overflow : auto; を指定する。親要素の高さが、フロート全体を含むように拡張される。これにより、フロートを解除したときと同じ効果を得る。

疑似要素 ::after と clearfix

::after 疑似要素により、フロートを含む親要素の最後に content プロパティと display プロパティでブロックレベル要素を生成させ、そこに clear プロパティを指定してフロートを解除させる方法。

#page::after {
  content: "";
  display: block;
  clear: both;
}

この指定だけを行うクラスを作り、必要な部分にそのクラスも追加指定して、フロートの解除を行う方法がよく行われる。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<footer class="clearfix">… … … </footer>

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

<div id="page" class="clearfix">… … … </div>

etc, etc,.

かつての古いブラウザでは、上記の指定だけではうまくいかず、さまざまなトリッキーな手法が編み出され、この「フロート解除用の特別クラス」に記述されて使われてきた。これは「clearfix」と呼ばれた。

現在は多くのブラウザで CSS にきちんと対応するようになったために、clearfix の記述は上記のようなシンプルなものになりつつある。