コーディング

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

2017.08.16

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.

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

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。