ディスプレイ付きのClearfixハックに別れを告げる:flow-root
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未満しか使用されていません。