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>
Sammy!
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>

そして今、すべてが期待どおりに機能します:

Sammy!
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>
Sammy!
Lorem ipsum dolor sit amet, consectetur adipiscing elit…

ブラウザの互換性

2020年の時点で、世界中の87 % o fブラウザは、データを使用できますか。 OperaMiniおよびInternetExplorer11はフロールートを適切に処理できません。 display: flow-root;を処理しますが、2020年には、世界中で1.5% of未満しか使用されていません。