今回は初心に戻ってfloatを見つめ直す。そんなお話です。

floatってそもそもなんじゃろ？

鷹Pは元々エンジニア上がりなのですが、floatっていう単語を初めて聞いたのはデータベースのデータ型でした。

単精度浮動小数点のデータ型です。

ただただ名称としてfloatと覚えていました。

やがて鷹Pはcssに出会います。

cssでもfloatというプロパティが出てきます。

覚えたての頃はfloatの事がよくわからず、ただただ要素を横並びにさせたい時にfloatを使うもんでごす！！！

って思って使っていたのですが、使ってるとある事に気付くのです。

floatした要素ってなんか下の要素がめりこんできやがるぜ・・・clear忘れるとぶっこわれるぜ・・・

ある日コーヒーフロートを飲んでいて思ったんです。そもそもフロートってどういう意味なの？

そうです、義務教育の大半を寝て過ごした鷹Pはfloatの日本語訳を知らなかったのです。

調べてみた所、「浮く」って出てくるわけですよ。

ほおおおおおおおおおおおおおおおお

全ての事が繋がりはじめました。浮いてる、あいつは浮いてるからめり込んできよるんや！！！！

そしてデータ型のfloatは「浮動」小数点やからfloatなんやああああああああああああ！！！

と、色々な事を理解したわけです。

データ型の話は余談ですが、つまり何が言いたいかっていうとfloatは左寄せ・右寄せとかする時に使うので、浮いてるという認識を持ってなかったりすると思うんですが、実はZ軸方向に浮いてるという事なんですね。

基本的にhtml要素は上から下に並ぶのですが、ぺたっと張り付いてるわけです。

それを浮かせてあげる事で左寄せや右寄せ、横並びとかに出来るっていうのがfloatなわけですね。

そしてZ軸方向に浮いてるのでclearを入れてあげないとめりこむわけです。

コーヒーフロートを飲む度にこの記事を思い出してもらえると幸せです。