「動いた。」

「でも、なぜ動いたのかは誰も知らない。」

float大戦、その後

Web制作の世界は混乱していました。
float:left; によって横並びは実現できる。

しかし、その代償として親要素は高さを失いました。

背景色は消え、

レイアウトは崩れ、

次々と新しい問題が発生していきます。

「もう少し簡単な方法はないのか。」

そんな願いの中、一つの技術が広まります。

clearfixの誕生

ある日、開発者の間で一つのコードが広まり始めました。

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

貼る。

保存する。

更新する。

直った。

なぜ直ったのか

新人エンジニアが尋ねます。

「これって、どういう仕組みなんですか？」

ベテランは静かに答えます。

「……。」

「直っただろ？」

「はい。」

「それでヨシ。」

もちろん、本当はちゃんとした理由があります。
擬似要素を最後に生成し、 clear: both; で float の影響を解除する。

でも当時の現場では、“理論より結果”でした。

「効く。」

それだけで十分だったのです。

コピペ文化

clearfixが普及した理由は、もう一つあります。

コピペできたから。

ブログで紹介され、技術サイトに掲載され、書籍に載り、新しい案件が始まるたびに貼り付けられる。

気が付けば、どのプロジェクトにも存在していました。

そして伝承へ

「親要素が消えました。」

「clearfix入れて。」

「直りました。」

「ありがとう。」

数年後。

「これ、何ですか？」

「昔からある。」

「消していいですか？」

「……待て。」

「そこには歴史がある。」

clearfixだけでは終わらない

もちろん、clearfixですべてが解決したわけではありません。

overflow: hidden;
clear: both;
zoom:1;

現場では、その場その場で様々な方法が試されました。
まさに試行錯誤の時代。

“動いたら採用”

それが現場のルールでした。

あとがき

今では display:flex; を一行書くだけで、
横並びも、高さ揃えも、レイアウトも、驚くほど簡単に実現できます。

だから若い開発者にclearfixを説明すると、
「そんなこと、本当にあったんですか？」と驚かれます。

ありました。

しかも、全国のWeb制作者が、本気で戦っていました。

昔のコードを笑わないでください。
そこには、clearfixの儀があります。

次回予告
第四世代 IE暗黒時代

同じHTML。
同じCSS。
同じブラウザ……ではなかった。

「なぜ、お前だけ崩れる。」

歴史上最も長い戦いが始まる。