display: flow-root で clearfix とおさらば
cleafix は要素の回り込みを回避するための手段としてこれまで使われてきた。この clearfix に変わるのが display: flow-root だ（まだ Chrome と Firefox でしか使えない）。
ひとつ前置きをするが、display: flow-root の前に、clearfix のおさらいとして KOJIKA 17 さんのブログを見ると良いかもしれない。clearfix の歴史が追える上に解説がわかりやすい。
さて、IE7 以下を気にしなくなったいま、もっとも多く使われてるのはこの記事で紹介されている「micro clearfix よりも、もっとコンパクトな clearfix」にだと思う。つまり以下のような指定だ。
.clearfix:after { content: ""; clear: both; display: block; }
また、回り込みを回避する方法として、親要素に overflow: hidden を使う方法もある。
.content { overflow: hidden; }
これら 2つに置き換わる回り込み回避の方法として、display: flow-root が CSS の仕様としてつくられた。指定方法は以下のようになる。
.content { display: flow-root; }
親要素に display: flow-root を指定することで、子要素の回り込みを回避する。
clearfix を使う手法は親要素の疑似要素をひとつ潰してしまうが、display: flow-root では潰さずに済む。また、overflow: hidden を使う方法はシャドウなど親要素から一部必要な見た目も切り取ってしまう。display: flow-root ではこういった問題もないので、サポートが整ったら使う他なさそうだ。
参考
-clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！ | コリス - 【2017年最新】clearfix一番短い書き方は親要素にdisplay:flow-root;を書き加えるだけ | CODE-LIFE
