CSS_Experience Exchange でフロートをクリアする一般的な方法の概要

WBOY
リリース: 2016-05-16 12:06:13
オリジナル
1968 人が閲覧しました

float をクリアするには 3 つの一般的に使用される方法があります。
これはクリアされていないフローティング ソース コードです。コードを実行すると、親要素の薄黄色の背景は表示されません。


[Ctrl A すべて選択 注:外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

1. 空のタグを使用してフロートをクリアします。私が長い間使用してきた方法は、空のタグを div タグまたは P タグにすることです。私は

を使用することに慣れていますが、これは十分短いものです。多くの人も


を使用しています。境界線をクリアする必要があるだけですが、理論的にはどのようなラベルでも構いません。このメソッドは、float 親要素内のすべての float 要素をクリアする必要がある後に、float をクリアするタグを追加し、そのための CSS コード:clear:both を定義します。このアプローチの欠点は、無意味な構造要素が追加されることです。


[Ctrl A すべて選択 注:外部 Js を導入する必要がある場合は、それを更新して実行する必要があります]

2. オーバーフロー属性を使用します。この方法は、空のラベル要素を通じてフロートをクリアすることで、意図しないコードを追加しなければならないという欠点を効果的に解決します。このメソッドを使用するには、フローティングを解除する必要がある要素で CSS プロパティ overflow:auto を定義するだけで済みます。 「zoom:1」はIE6との互換性を考慮したものです。

[Ctrl A すべて選択 注:外部 Js を導入する必要がある場合は、実行前に更新する必要があります]

3. after 疑似物体がはっきりと浮かび上がります。この方法は、IE 以外のブラウザにのみ適用されます。具体的な書き方については以下の例を参照してください。ご使用の際は以下の点にご注意ください。 1. このメソッドでは、浮動要素をクリアする必要がある疑似オブジェクトに height:0 を設定する必要があります。そうしないと、要素は実際の値よりも数ピクセル高くなります。 2. content 属性は必須ですが、その値は次のとおりです。空、青の理想的な議論 この方法では、content 属性の値を「.」に設定していますが、空のままにすることもできることがわかりました。


[Ctrl A すべて選択 注:外部 Js を導入する必要がある場合は、実行前に更新する必要があります]

これら 3 つの方法にはすべて、一定の欠点があります。それらを使用する場合は、最適なものを選択する必要があります。比較すると、2 番目の方法の方が望ましいです。上記のメソッドはオリジナルではなく、すべてインターネットから得たものであり、ここにまとめられています。オリジナルの作成者がすべての権利を留保します。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート