ホームページ  >  記事  >  ウェブフロントエンド  >  float_html/css_WEB-ITnose を設定した後、CSS div の高さを自動的に増やすことができません

float_html/css_WEB-ITnose を設定した後、CSS div の高さを自動的に増やすことができません

WBOY
WBOYオリジナル
2016-06-24 12:31:531013ブラウズ

現在、「閉じた (クリア) float」をクリアするために使用されるメソッドは 4 つあります:

1. 追加タグメソッド

このメソッドは、親コンテナの最後に追加タグを挿入し、フロートをクリアします。親コンテナを展開します。この方法はブラウザーとの互換性が高く、問題はありません。欠点は、追加の (通常は意味論的に非セマンティックな) タグが必要なことです。
私は個人的にこの方法は好きではありませんが、確かに W3C によって推奨されている方法です


または


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

このメソッドは、親コンテナーで after 疑似クラスとコンテンツ宣言を使用して、指定された現在のコンテナーの末尾に新しいコンテンツを追加します。コンテンツ。一般的なアプローチは、小さくて目立ちにくいため、「ドット」を追加することです。次に、それを使用してフロートをクリアし (フロート要素を閉じ)、コンテンツを非表示にします。
この方法には一般的な互換性がありますが、さまざまなハックの後、さまざまなブラウザーに対応でき、同時に HTML を比較的きれいに保つことができるため、今でもより頻繁に使用されています。

以下は引用された内容です:
#outer:after{
height:0;
display:block
}
3. オーバーフローを設定します。 hidden または auto

このアプローチは、親コンテナーのオーバーフローを hidden または auto に設定して、標準の互換性のあるブラウザーでフローティング要素を閉じることです
ただし、オーバーフローを使用すると、ページのパフォーマンスに影響を与える可能性があります。影響は不確かなので、複数のブラウザでページをテストしたほうがよいでしょう

4. 外部要素をフロートにする、フロートインフロート

このアプローチは、親コンテナもフロートにすることであり、フローティング要素の特徴を利用します。要素は、浮動要素を閉じるということです。この方法は IE/Win および標準互換ブラウザでは良好な結果をもたらしますが、フローティングが必要なだけで親コンテナがフローティングにならない場合があることも明らかであり、場合によってはレイアウトがフローティングにならない場合があります。浮かせるのも正常です。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。