clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！
Post on:2017年1月26日
sponsors
clearfixが登場してから早10年が過ぎ、お世話になった人もたくさんいると思います。
そんなclearfixさんの必要性がなくなる新しいCSSのプロパティが、2017年1月25日にW3Cのワーキングドラフトで定義されました。まだ一部のブラウザにしか対応していませんが、たった一つの指定でフロートを簡単にクリアできます。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
ついに、Chrome CanaryとFirefox 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です。
コードも非常に簡単です。
|
1 2 3 |
.container { display: flow-root; } |
これだけの記述でフロートをクリアし、フロートさせた要素の後に続くコンテンツを問題なく表示します。
実際のデモは、下記ページでご覧ください。
※「display: flow-root;」の対応ブラウザは2017年1月現在、Chrome CanaryとFirefox Nightlyです。
「flow-root」は名前が変わる可能性があり、GitHubで現在議論されています。
また、IEへの実装を希望する声も積極的に行動がはじまっています。希望者は「Vote」をクリックしてください。
sponsors
