floatやclearプロパティ周りの話題が出るたびに、「flex使えばオッケーじゃん」というような声が散見されるので、「それは違う！」と強く訴えたい、というお話です。
そもそもflexはfloatの代替品ではない
floatプロパティは、それを設定した要素を文字通り"浮かし"て、後続の要素を回り込ませる役割を持っています。
一方のflexの役割は"並べる"のであって、floatのように後続要素を回り込ませる機能は持ちません。
floatを使って要素を並べるのは、本来の用途から少し外れています。そのためclearfixという多少の無理をしていました。その無理のしわ寄せは、clearfixを適用した要素には、after疑似要素を利用できないところに現れます。
なお、要素を並べるには、floatの他に、
- display: inline-block;
- display: table;とtable-cell;の組
を使うことができます。
段落ちを利用して簡易的にレスポンシブ対応をさせる際、floatを使うと要素の高さの差によって、行頭位置まで落ちてくれないことがあります。inline-blockを使うと段落ちした要素は確実に行頭に落ちます。ただし、inline-blockは改行コードの文字サイズを無視できないため、要素間の間隔を適切にコントロールできない欠点があります。
どの方法も本来の用途から少し外れており、並べる機能に特化したflexの登場はまさに福音と言えます。しかしflexが代替できるのはカラムの分割などの用途に使われるfloatやclearfixに限られます。floatやclearfixのすべての役割を代替することはできません。
clearfixは親要素の背景を表示させるためだけのものでもない。
少なくとも私の場合、clearfixの最大の用途は
「floatの影響を、その親要素内だけにとどめて、親要素の後に続くものが回り込まないようにする。」
という目的を達成するためにあります。
特にレスポンシブデザインが当たり前になってからはこの目的の重要度が上がっています。
floatを画像などに適用した際、幅の狭い画面では画像の下までテキストが回り込んでいたのに、幅の広い画面では画像の横のスペースにテキストが収まり、その下に余白ができる、という状況が頻発するからです。（サムネイル画像と概要テキストで構成される新着記事一覧などはその代表例）
clearfixはHTMLコードへの負担なしにfloatの影響範囲をコントロールできる優れた手法であり、回り込みの機能を持たないflexによって代替されるものではありません。
「flexがあるからclearfixは用済み」という考えは誤りです。
flow-rootへの期待と不安
このclearfixを代替するプロパティが検討されているそうです。
clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！ | コリス
clearfixのちょっとした欠点である、after疑似要素がclearfixによって埋まってしまう問題を解消してくれるプロパティですが、今のところこの欠点で困ったことが無いので、あまりご利益を感じていないのも事実です。
とはいえ、駆け出しのウェブデザイナーにとってはclearfixのようなややこしいテクニックを理解する手間が省けるのでよいのではないかなあと。遅かれ早かれ、これは普及してくれるんじゃないかと期待しています。
一方、不安な点は名称にあります。floatに関連するものなのに、flow-rootとはこれいかに。float-rootとかなら明瞭ではないかと思うのですが。
名称変更に関する議論のリンク先を見てみると活発な議論が展開されています。
「flow」はCSS Regionsプロパティで使われている。これとは無関係のものに「flow-root」を使うのはかなり混乱するのではないか？「float-container」とかにすることはできない？
という問題提起で、「いや、float-containerもそれなりにややこしいぞ」「そんな変えなくてもよくね？」「変えるんならenclosed-blockとかseparete-blockとか単にnew-blockとかどう？」「flow-blockはいかが？」「block-containerとかは？」
など、多くの案が出されています。
「これFF53とchrome57には実装されるから急いで議論しないとあかんで」
ということですが、まとまるのでしょうか。（現在FFのバージョンは50、chromeは55）
Edgeへの搭載については、IE10がflexプロパティをいち早く実装したらプロパティ名が変わって気の毒なことになってたので、名前が決まってからでいいんじゃないかと思っています。
まあ、少なくともあと3年、長くて5年くらいはclearfixとの付き合いは続くんじゃないでしょうか。非対応ブラウザではほぼ確実にレイアウトが崩れるはずですから、IEやAndroidのような非対応ブラウザがなくなるまでは使うことはできません。
