divコンテナ内の背景色または画像は、サイズが大きくなるにつれて大きくなります。

コードをコピー

コードは次のとおりです。

高さ:自動 !重要;
高さ:550px;
最小高さ:550px;

Div の末尾に次のコードを追加します。
<div style="clear:both;"></div>

または

<br style="clear:both;" />

2. after疑似クラスを使用する

このメソッドは、親コンテナーの after 疑似クラスとコンテンツ宣言を使用して、指定された現在のコンテンツの最後に新しいコンテンツを追加します。一般的には、「ドット」を追加します。これは、ドットの方が小さくて目立ちにくいためです。次に、これを使用してフロートをクリアし（フロートされた要素を閉じ）、コンテンツを非表示にします。

この方法は互換性が平均的ですが、さまざまなハックによりさまざまなブラウザに対応できるようになり、HTML が比較的クリーンな状態を保つことができるため、今でも頻繁に使用されています。

コードをコピー

コードは次のとおりです。

#外側:後{
コンテンツ："。";
高さ:0;
可視性:非表示;
表示:ブロック;
クリア:両方;
}

3. オーバーフローを非表示または自動に設定する

このアプローチは、親コンテナーのオーバーフローを非表示または自動に設定して、標準準拠のブラウザーでフローティング要素を閉じることです。

ただし、オーバーフローを使用すると、ページのパフォーマンスに影響する可能性がありますが、この影響は不確実です。複数のブラウザでページをテストすることをお勧めします。

4. フローティング外部要素、フロートインフロート

このアプローチは、親コンテナーもフロートさせるもので、フローティング要素の機能（フローティング要素はフローティング要素を閉じる）を活用します。この方法は、IE/Win や標準互換ブラウザでは効果が高いですが、欠点も明らかです。親コンテナはいつでもフローティングできるとは限りません。結局のところ、フローティングは特殊な動作であり、レイアウトによってフローティングできないことがよくあるのです。

<<: 初心者向け入門講座⑧：記事サイトを簡単に作る

>>: プロジェクトのフロントエンドとバックエンドでの Echart チャートの使用に関する詳細な説明