clearfixの仕組み

clearfixは、
フローティングボックスが後続のボックスのレイアウトに影響を与えないようにするためのテクニック。

<header>header</header>
<div class="wrap">
  <article class="main">main</article>
  <aside class="side">side</aside>
</div>
<footer>footer</footer>

このHTMLに対して、
CSSで、mainにfloat:left;、sideにfloat:right;、wrapにwidthを設定するなどすると、footerが入り込む。

（補足（蛇足）。上のHTML内のタグについて。` `は、それだけで内容が完結している部分で使用。 ページのメインコンテンツや、ブログの１つの記事などの「それだけで完結している部分（内容がまとまったもの）」で使用。（1ページに複数使用可。）` `は、メインコンテンツでない部分で使用。サイドバーに使ったり、広告の表示などに使う。）

そこで、下記のように記述する。

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

こうすると、footerが入り込まない。

:afterで.wrapの後ろにcontent: "";とdisplay: block;による空のブロック要素が追加され、
clear:both;によって回り込みが解除されて、footerがフローティングボックス（mainとside）の下にくる。

補足。 clearは、floatで設定した回りこみを解除するもの。以下、設定値の種類。 ・none（初期値） 回り込み解除をしない指定。 ・left 左側の回り込みを解除する指定。 ・right 右側の回りこみを解除する指定。 ・both 左側、右側ともに回りこみを解除する指定。

clearfixの代わりにoverflowを使う方法もありますが、割愛します。

以上。