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
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（float包含）

display: flow-root の flow-root（float包含） パターンです。

プレビュー全画面表示

通常のblock（比較）

display: flow-root の 通常のblock（比較） パターンです。

プレビュー全画面表示

マージン折り畳み防止

display: flow-root の マージン折り畳み防止 パターンです。

プレビュー全画面表示

実務での使いどころ

  • フロートの包含

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

  • マージン相殺の防止

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

注意点

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

アクセシビリティ

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

参考リンク