CSSが普及し始めた頃、誰もが思いました。

「これでtableレイアウトは終わる。」

HTMLは意味を持つ構造を書く。
デザインはCSSで管理する。

今では当たり前の考え方ですが、当時はまさに革命でした。
そして、新たなレイアウトの主役として現れたのが、float です。

「横並びになった！」

css
 .box{
 float:left;
 }

画面を更新する。
左側に画像。
右側に文章。
横並びになった。

「すごい！」
「CSSだけでレイアウトできる！」

Web制作者たちは歓喜しました。

事件は突然起こる

しかし数分後。

「……あれ？」

親要素の背景色が消えている。
高さがない。

レイアウトがおかしい。
原因は、floatでした。

文字通り、要素は “浮いていた” のです。
親要素は、その浮いた子要素を高さとして認識しません。

つまり、

子どもはいるのに、親は誰もいないと思っている。

今思えば不思議な仕様ですが、
当時はそれが当たり前でした。

Web制作者たちの戦い

ここから長い戦いが始まります。
「親要素の高さを戻せ。」
そのために、人々はさまざまな方法を試しました。

css
 clear: both;

「直った！」

別のページ

「直ってない。」

css
 overflow: hidden;

「今度こそ！」

別のページ

「画像が切れた……。」

そして誰かが新たな知恵を共有する。

「こうすると直るらしい。」

その情報はブログで広まり、掲示板で語られ、書籍に載り、全国のWeb制作者へ受け継がれていきました。

当時の現場

開発者A　「親要素の高さが消えました。」

開発者B　「clearを入れて。」

開発者A　「直りました。」

翌日。

「別ページで崩れました。」

「……。」

そんな日常が続いていました。

動けばヨシ

当時の開発現場では「なぜ直ったのか」よりも、「直ったこと」の方が重要でした。

表示された。

崩れていない。

納品できる。

それだけで十分だった時代です。

だからこそ、「動いたからヨシ。」という言葉が、今でもどこか懐かしく感じるのかもしれません。

あとがき

今ではFlexやGridのおかげで、「横並び」は数行で完成します。
しかし、その便利さの裏には、floatと格闘し続けた時代がありました。

親要素の高さが消えるたび、
開発者は原因を探し、
少しずつ知識を積み重ねてきました。

だから古いコードで float:left; を見かけても、
笑わないでください。
それは当時の最先端技術だったのです。

次回予告
第三世代 clearfixの儀

「親要素の高さを取り戻せ。」
人々は、一つの儀式にたどり着く。

その名は――

clearfix。