現在、「閉じた (クリア) float」をクリアするために使用されるメソッドは 4 つあります:
1. 追加タグメソッド
このメソッドは、親コンテナの最後に追加タグを挿入し、フロートをクリアします。親コンテナを展開します。この方法はブラウザーとの互換性が高く、問題はありません。欠点は、追加の (通常は意味論的に非セマンティックな) タグが必要なことです。
私は個人的にこの方法は好きではありませんが、確かに W3C によって推奨されている方法です
または
2. after 疑似クラスを使用します
このメソッドは、親コンテナーで after 疑似クラスとコンテンツ宣言を使用して、指定された現在のコンテナーの末尾に新しいコンテンツを追加します。コンテンツ。一般的なアプローチは、小さくて目立ちにくいため、「ドット」を追加することです。次に、それを使用してフロートをクリアし (フロート要素を閉じ)、コンテンツを非表示にします。
この方法には一般的な互換性がありますが、さまざまなハックの後、さまざまなブラウザーに対応でき、同時に HTML を比較的きれいに保つことができるため、今でもより頻繁に使用されています。
以下は引用された内容です:
#outer:after{
height:0;
display:block
}
3. オーバーフローを設定します。 hidden または auto
このアプローチは、親コンテナーのオーバーフローを hidden または auto に設定して、標準の互換性のあるブラウザーでフローティング要素を閉じることです
ただし、オーバーフローを使用すると、ページのパフォーマンスに影響を与える可能性があります。影響は不確かなので、複数のブラウザでページをテストしたほうがよいでしょう
4. 外部要素をフロートにする、フロートインフロート