clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える!

clearfixが登場してから早10年が過ぎ、お世話になった人もたくさんいると思います。
そんなclearfixさんの必要性がなくなる新しいCSSのプロパティが、2017年1月25日にW3Cのワーキングドラフトで定義されました。まだ一部のブラウザにしか対応していませんが、たった一つの指定でフロートを簡単にクリアできます。

デモのキャプチャ

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

サイトのキャプチャ

The end of the clearfix hack?

ついに、Chrome CanaryFirefox Nightlyでdisplayの新しいプロパティが利用できるようになりました。CSS Display Module Level 3(2017年1月25日)のワーキングドラフトでは、「display: flow-root」は次のように定義されています。

要素はブロックレベルのボックスを生成し、フローレイアウトでコンテンツを配置します。その要素は常にそのコンテンツのために、新しいブロックレベルのコンテキストを構築します。
サイトのキャプチャ

flow-root :CSS Display Module Level 3

これがどういうことなのか、見てみましょう。
まずは、従来のfloatを使ったレイアウトです。

デモのキャプチャ

floatを使ったレイアウトでありがちなこと

ボックス内にフロートさせた要素があり、フロートをクリアしないと、親要素からはみでてしまいます。

この現象を解決するためにはclearfixを使用して、生成されたコンテンツを挿入し、display: tableやdisplay: blockを使い、フロートをクリアしていました。

デモのキャプチャ

floatのクリア

clearfixについては、下記の記事で詳しく解説しています。

このclearfixの代わりになる新しいプロパティが、display: flow-root です。

デモのキャプチャ

display: flow-root でfloatのクリア

これでclearfixを使用する必要はなく、flow-rootの値を持つdisplayプロパティを使用すればOKです。
コードも非常に簡単です。

これだけの記述でフロートをクリアし、フロートさせた要素の後に続くコンテンツを問題なく表示します。

実際のデモは、下記ページでご覧ください。

デモのキャプチャ

display: flow-rootのデモ

※「display: flow-root;」の対応ブラウザは2017年1月現在、Chrome CanaryFirefox Nightlyです。

「flow-root」は名前が変わる可能性があり、GitHubで現在議論されています。

また、IEへの実装を希望する声も積極的に行動がはじまっています。希望者は「Vote」をクリックしてください。

sponsors

top of page

©2018 coliss