clearfixの代わりになるプロパティflow-root

コーディングをする際になくてはならないものの一つにclearfixがあるのではないでしょうか。
内包している要素にfloatがかかっている場合にclearfixをかけるのを忘れてボックスがうまく表示されないというのは、コーディングに携わる人が一度は経験していることです。

今回はこれに代わる新しいプロパティー「flow-root」を紹介します。

clearfixを適応していないボックス

内包しているボックスがfloatを設定されているため、ピンクの枠がうまく表示されていません。

See the Pen float-box01 by tetsuro (@tetsuro) on CodePen.

clearfixを適応しているボックス

clearfixを設定したことで、ピンクの枠が意図通りに表示されました。

See the Pen float-box02 by tetsuro (@tetsuro) on CodePen.

新しく定義されたプロパティ「flow-root」

flow-rootはこれまでclearfixで対応してきたことを一つのプロパティで対応できます。

しかし、新しく定義されたプロパティなのでブラウザもまだFirefoxとChromeが対応しているのみで、SafariやEdgeはまだ対応していません。現状では使いにくいプロパティですが、各ブラウザが対応してくると、積極的に使用したいプロパティですね。

See the Pen flow-box03 by tetsuro (@tetsuro) on CodePen.

参考にしてみてください。