横並びのレイアウトにdisplay: flex、段組みにdisplay: girdがあり、いずれも便利ですよね。あの便利さを知ってしまうとfloatを使ってのレイアウトには戻れません。floatはオワコンになってしまったのでしょうか。
floatの必要性
flexがある今、floatはもう使わないのでしょうか。確かに、単純な横並びのレイアウトには使わないでしょう。そういう意味ではflexはfloatの上位互換です。floatはもういらないのでしょうか。
下方互換確保のため
flexに対応していない古いブラウザ対応のためfloatを使う場面は考えられます。しかし、2018年5月末でYahoo Japanが旧式のTLS1.0、1.1しか対応していないブラウザを切ってますしflexが使えない環境というのもそう多くないでしょう。
古いブラウザのシェア率を考えると、もう目をつぶっても良い水準ですから、下方互換確保のためにfloatを使う必要性は高くないです。
回り込みのため
flexにはない、float の使い方として文字の回り込みがあります。以下のようなHTMLとCSSの場合、
<p>
<img src="example.jpg" alt="" width="320" height="320" style="float: left;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia cumque, hic earum harum itaque, quasi quibusdam obcaecati quam nihil, accusantium quo nulla iusto ab ut laborum. Quo sit, provident sed! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia cumque, hic earum harum itaque, quasi quibusdam obcaecati quam nihil, accusantium quo nulla iusto ab ut laborum. Quo sit, provident sed!
</p>
このようになります。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia cumque, hic earum harum itaque, quasi quibusdam obcaecati quam nihil, accusantium quo nulla iusto ab ut laborum. Quo sit, provident sed! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia cumque, hic earum harum itaque, quasi quibusdam obcaecati quam nihil, accusantium quo nulla iusto ab ut laborum. Quo sit, provident sed!
みたいな画像の下に文字が回り込むデザインを実装するときに使えるでしょう。
floatは本来の使い方に戻った
floatの本来的な使い方は上記のような回り込みを実装させるCSSだったはずです。回り込み、つまり横並びのレイアウトができるが故に様々なレイアウトに出張して半ば強引に使われていたのです。(仲間にtable-cell)
無理矢理使っていたからclearfixを始めとする様々な小技を駆使してレイアウトしていたのが、前時代的コーディングではないでしょうか。
flex, girdがもたらしたもの
flexやgridの登場でCSSのレイアウトは楽になりました。小手先を弄したハックや複雑なプロパティをあてなくても、簡単に思い通りのレイアウトを実現できます。
その結果、過剰なラッパー用のタグや多数のCSSプロパティを記述する必要がなくなり、可読性が向上しました。今まで面倒だった、上下左右中央揃えもdisplay: flex, justify-content: center, align-items: centerの3つだけで済みます。
記述がシンプルになることで、他の要素への依存性も減り、メンテナンス性向上にも寄与します。例えば、かつての上下左右中央テクニックとしてあった、positionにtopとleftを50%にし、枠の大きさの半分をmargin-top, margin-leftからマイナス差し引く、場合、ネガティブマージンが決め打ちなので、大きさが変わると面倒、といった不便が解消されます。
floatはオワコンではない
floatにかつての「横並びなら、俺に任せろ」的な栄光はなくなりましたが、終わったわけでなく、元に戻ったのです。アクロバティックなCSSを駆使する時代は終わり、平和な時代が訪れたのです。そのうち、「昔はfloatとclearfixを使って並べていたんじゃ」と説教臭く話す時代も来るんじゃないでしょうか。
これからは平和なコーディングを心掛けていきたいです。