clearfixは魔法の言葉ではありません

floatの本質は「回り込み」ではない

floatの仕組みについての詳細は本記事では触れません。
ただfloatを「回り込み」という対訳で覚えている方へは警鐘。
float = 回り込み
ではありません。
特定条件下で「回り込んでいるように見える」だけであって、一方を他方に「回り込ませる」ためのプロパティではありません。
floatの英単語本来の意味である
「浮く」「浮かぶ」「浮かせる」
というのが正確な表現です(自動詞・他動詞両方です)
「回り込む」特定条件下とは、画像+テキスト の組み合わせなど限定的であり副次的な結果にすぎません。
float = 回り込み と覚えているからこそ本来の挙動を理解できずにミスをします。

何故float解除が必要なのか

float というのはボックスを浮動化させます。
浮動化するとどうなるかというと、場所を占有しなくなります。
浮かんでいるので場所を保有しません。
floatが指定された要素それ自体の「サイズ」は存在するものの、そのfloat要素が収まっているボックスは 子供にあたるfloat要素の大きさを認識しません。

例1)

• float: left;
• float: left;

上記の緑ボックスと青ボックスは互いに float: left; の指定があります。
ソース内容は以下の通り。

<ul>
  <li style="float: left; width: 140px; height: 100px;">
  <li style="float: left; width: 140px; height: 100px;">
</ul>

ソースからは細かい部分(背景色やテキストなど)を省いてあります。
これはよく「ナビゲーション」などに使われます。
緑のボックスと青のボックスはfloat指定しない限り横並びにはなりません。
(display値の操作は除く)

floatが指定されているのは各々 <li>という要素であり、その li要素は<ul>の子要素です。
ul要素が「親」li要素が「子」という「親子関係」にあたります。
ulがliを内包していますよね それが「親」です。

floatを指定された子であるところの2つのボックスには、widthが140px、heightが100px、という指定があります。
では親である ul の高さはいくつでしょうか。
子要素を抱えており その高さが 100px
親は子を包んでいるわけだから子要素に拡げられて 100pxでしょうか。
違います。
答えは 0 です

floatされた要素は「浮いている」状態であり「場所を占有していない」のですから、親であるulは「子はサイズを持っていない = 居ない」という認識をします。
というわけで「中身には何も無い = サイズゼロ = 高さが出ない」という結果です。

何故高さが出ないのか = floatが解除されていないから

高さが出ないとどうなりますか？
次に続く要素は前(上)の要素を避けて下に位置するべきところですが、上の要素に高さが無いわけですから重なってしまいます。
結果 浮いている子要素の背面に配置されます。

例2) floatが解除されている場合

• float: left;
• float: left;

例3) floatが解除されていない場合(スクリーンショットです)

例3の方は赤い背景のボックスがありません。
float要素を含むul要素の高さが無く重なってしまった(後続ブロックが浮いているfloat要素の背面に配置されてしまった)ためです。
赤ボックスの高さをfloat子要素と同じ100pxに設定したのですっぽり隠れてしまっています。
150pxならば下の50pxだけが顔を出します こんな風に(スクショ) ↓

だから必ずfloat解除をするんです。
レイアウトを崩す大きな原因のひとつがfloatの解除し忘れです。

何故解除を忘れるのか

解除忘れ状態をしばしば目にするんですね。
ただ重なってしまえばソースを書いた本人にもすぐわかるわけで。
そこでどうするかというと、
改行で無理やり空白を作ってしまう
ulの終了タグ </ul> の後ろに <br> を連打。
すると当然空白行ができますから それでなんとか間に合わせている と。
経験がある方もいらっしゃるのではないでしょうか(笑)
これはダメですね ダメ (´・ω・｀)
レスポンシブデザインなら特にダメ。
画面サイズが小さく狭くなれば当然float要素ははみ出さないよう下の行に下がります。
パソコンで1行だったものが2行あるいは3行になったりします。
するとbrで制作した空白行では間に合わなくなりますね 単純な物理的法則として。
スマホでのナビゲーションの重なり 非常によくみかけます(笑)

解除方法の模索

そこでみなさん検索されるんです。
「今時のfloat解除の仕方」がキーワードでしょうか。
そしてこうします ↓

<ul class="clearfix">
  <li style="float: left; width: 140px; height: 100px;">
  <li style="float: left; width: 140px; height: 100px;">
</ul>

これでfloat解除を行った「つもり」になってしまう。
クラス名に clearfix を振ったところで何も起こりません。
CSSをお勉強されている方はもちろんおわかりでしょうが、clearfix とは「フロート解除」の一つの方法を示す英単語ですが CSSプロパティ名でもなんでもありません。
ただの「任意につける名前・名称」です。
クラス名を付けたのならば そのクラス名が与えられた要素の装飾指定 を別途行わないと。
こんな感じでしょうかね ↓

.clearfix:before,
.clearfixf:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

これをスタイルシート側で定義しないと何の意味もありません。
clearfix というクラス名を持つ要素に一体何を施すのか というのはCSSで指定を行わないと無意味。
htmlに class="clearfix" と書いただけで何がどうなるわけではないんです。

何故 clearfix という名称かと言うと、発案者が方法名として使ったからです。
決してCSSプロパティとして存在しているわけではありません。
サイトによっては
class="clear"
あるいは
class="float-clear"
なんてのもあるかもしれません。
クラス名はどうだって良いんです。
上に記載したCSS内容とクラス名が合致すればそれでOK。

クラス名を書いただけじゃダメ！
CSS内容を併せて記載しないと！

ということです 実際

• float解除なし brで無理やり高さ出し
• クラス名 clearfix がhtml側にあり CSSには .clearfix の定義が何も無い

こういった無茶なレイアウトは本当によく目にします。
最後に本末転倒ですが、私のテンプレについてはclearfixの定義が既にありますので わざわざ新たに組み込む必要はありません。
floatの親要素に
class="cf"
これでOKです。