追加のマークアップを使用せずに、最新の CSS でフロートを効率的にクリアするにはどうすればよいですか?

最新の CSS でフロートをクリアするためのベスト プラクティス

CSS の領域では、フロートをクリアすることは長年の課題であり、さまざまな手法が登場しています。何年にもわたって。
> を使用すると、これは一般的なアプローチですが、不必要な HTML マークアップが導入されます。最新の CSS は、この問題に対して、よりエレガントで効率的なソリューションを提供します。

擬似要素アプローチ:

2014 年では、擬似要素を利用して、クリアフィックス。これには、フロート要素の親コンテナに次のスタイルを追加することが含まれます:

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

この方法は、最新のすべてのブラウザで有効であり、HTML 要素を追加する必要がなくなります。

オーバーフロー プロパティ:

もう 1 つのクロスブラウザー ソリューションは、親コンテナーのオーバーフロー プロパティを非表示または非表示に設定することです。自動。これには、追加のマークアップを必要とせずにコンテナ内のフロートをクリアする効果があります:

.container {
  overflow: hidden;
}

Micro Clearfix:

さらに最小限のアプローチについては、Nicholas Gallagherは、マイクロ クリアフィックス手法を提案しました:

.cf {
  zoom: 1;
}
.cf:before,
.cf:after {
  display: table;
}

.cf:after {
  clear: both;
}

この手法は、オーバーフロー プロパティと

JavaScript ハックの回避:

この目的で JavaScript ハックを使用することは避けることをお勧めします。 JavaScript はブラウザごとにさまざまなレベルのサポートがあり、必要なときに常に利用可能または有効になるとは限りません。したがって、ブラウザ間の互換性を確保するには、CSS ベースのソリューションを使用する方がより信頼性が高くなります。

以上が追加のマークアップを使用せずに、最新の CSS でフロートを効率的にクリアするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。