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未満しか使用されていません。