ディスプレイ付きのClearfixハックに別れを告げる:flow-root
提供:Dev Guides
clearfix ハックは長い間存在しており、コンテナよりも大きいフローティング要素で発生する可能性のある問題にパッチを適用します。
問題の例を次に示します。
.box { padding: 1rem; background: rgba(255, 105, 180, 0.1); border: 3px dashed rgba(255, 105, 180, 0.1); border-radius: 5px; } .box img { float: left; }
<div class="box"> <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div>
Lorem ipsum dolor sit amet、consectetur adipiscing elit .. ..
古いclearfixハック
以前の修正は、コンテナにoverflow: auto
を設定することでした。そのため、このようなクラスは、float要素を含む要素で作成および使用されることがよくあります。
.clearfix { overflow: auto; }
<div class="box clearfix"> <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div>
そして今、すべてが期待どおりに機能します:
Lorem ipsum dolor sit amet、consectetur adipiscing elit .. ..
表示:フロールートの改善
コンテナ要素にdisplay:flow-root を使用すると、フローレイアウトフォーマットを使用して要素の新しいブロックフォーマットコンテキストが確立され、オーバーフローの問題がよりエレガントに修正されます。
.box { display: flow-root; padding: 1rem; background: rgba(255, 213, 70, 0.1); border-bottom: 2px solid rgba(236, 198, 48, 0.2); }
<div class="box"> <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div>
Lorem ipsum dolor sit amet、consectetur adipiscing elit .. ..
ブラウザの互換性
2020年の時点で、世界中の87 % o fブラウザは、データを使用できますか。 OperaMiniおよびInternetExplorer11はフロールートを適切に処理できません。 display: flow-root;
を処理しますが、2020年には、世界中で1.5% of未満しか使用されていません。