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

display: flow-root

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

レイアウトBFC

概要

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

対応ブラウザ

デスクトップ

Chrome 58+
Edge 79+
Safari 13+
Firefox 53+

モバイル

Chrome Android 58+
Safari iOS 13+
Firefox Android 53+

基本構文

CSS 
/* clearfix ハックの代替 */
.container {
  display: flow-root;
}

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

実務での使いどころ

  • フロートの包含

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

  • マージン相殺の防止

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

注意点

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

アクセシビリティ

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

参考リンク