float回り込み解除を擬人化したら、超絶わかりやすくなった〜clear: both; 編

      2018/12/08

ここはHTMLワールド。

ここにはヘッダー、メイン、サイドバー、フッターと4つの国があります。

そしてこの世界は、下から上へと引力が働いているのです。

1番下にあるフッターは、ヘッダー・メイン・サイドバーに“乗っかってる”状態。
もし直上にあるサイドバーが消えてなくなると、フッターは上にストンと落ちます。

そしてこの4つの国の国王たちは、cssという魔法を使って理想の世界を作ろうとしていました。
理想の世界とは、世界の神であるユーザーが「美しい」と感じる世界です。

4人はこんな世界を思い描きました。

4人の国王たちは話し合いました。

メイン王「理想の世界を作るには、うちとサイドバー王のところが、横並びになればいいんじゃね?」

サイドバー王「だよね。ヘッダー王はそのままで、フッター王のところが横並びになったウチらの下に付いてくれれば良いんだよね。
よし、じゃあここで、神から授かったcssという魔法を使おう!」

メイン王「俺たちがキレイに横に並ぶには・・これだ、このfloatという魔法を使えば行けそうだぞ!
float:left;とfloat:right;という2種類に分かれてるらしい。ちょうど俺とサイドバー王の2国で左右に別れるから、leftとrightそれぞれ使えば良さそうだな」

サイドバー王「俺がfloat:right;だな。よし、使ってみよう!」

メイン王「うわっ!なんかウチの大陸が浮いたんだけど!」

サイドバー王「俺もだ。どうやら、この魔法は左右に寄るだけじゃなくて、宙に浮くらしい。と言うかそもそも、フロートって英語で“浮く”って言う意味らしいw」

メイン王「へー、そうなんだ?まあ、浮いても傍目には分からないから、理想の美しい世界には影響なさそうだな。

・・・・お。いいんじゃない?何はともあれキレイに思った形に俺たちが左右に並んだぞ!やった!」

サイドバー王「理想の世界が出来たな!・・・・いや、ちょっと待て、フッター国はどこに消えた?」

フッター王「おーい!ここだ!お前らの下敷きになってるんだ!」

メイン王「うわっ!!お前なんでそんなところに!」

サイドバー王「そうか。フッターはこれまで俺たちサイドバー、メインに乗っかることによって下の位置に居たんだが、俺たちが宙に浮いたことでその支えがなくなった。そして引力によって上に落っこってしまったんだ!」

メイン王「そして宙に浮いた俺たちに潜り込むような形になった。だから見えなかったのか!これを解決する魔法は・・あ、あったぞ!フッター、これを使え!」

clear: both;

フッター王「おお!お前たちに乗っかることが出来たぞ!」

全員「理想の世界が出来た!」

おしまい!!

 - エンジニアへの道