Widely available YES。全主要ブラウザで対応済み。clearfix ハックの代替として推奨。

display: flow-root

フロートを含む要素の高さがゼロになる「フロート崩れ」を防ぐために、従来は overflow: hidden や clearfix ハックが使われていた。display: flow-root は意味的に正しい方法で新しい BFC を生成し、フロートの包含とマージン相殺の防止を行う。overflow の副作用なく BFC を作成できる。

レイアウトBFC

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.display.flow-root
58
79
53
13
58
13
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Alternative to the clearfix hack */
.container {
  display: flow-root;
}

.container .float-child {
  float: left;
  width: 50%;
}

ライブデモ

Flow-root(floatinclude)

display: flow-root Flow-root(floatinclude) demo.

プレビュー全画面表示

Normal. Block(comparison)

display: flow-root Normal. Block(comparison) demo.

プレビュー全画面表示

marginfoldprevention

display: flow-root marginfoldprevention demo.

プレビュー全画面表示

実務での使いどころ

  • フロートの包含

    float を使ったレガシーレイアウトで、親要素に display: flow-root を指定するだけでフロート崩れを防止できる。

  • マージン相殺の防止

    親子間のマージン相殺を防ぎたい場合に、親要素に flow-root を指定して独立した BFC を作成する。

注意点

  • display: flow-root はブロックレベル要素として振る舞うため、インライン要素に使うと表示が変わる。

アクセシビリティ

  • 表示上の変化のみで、セマンティクスやアクセシビリティツリーには影響しない。

参考リンク