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

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

<style type="text/css"> <!-- *{マージン:0;パディング:0;} ボディ{font:36px ボールド; カラー:#F00; テキスト-整列:センター;} #layout{背景:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </スタイル> <div id="レイアウト"> <div id="left">左</style>

右

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

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

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

---

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

<style type="text/css"> <!-- *{マージン:0;パディング:0;} ボディ{font:36px ボールド; カラー:#F00; テキスト-整列:センター;} #layout{背景:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} .clr{クリア:両方;} --> </スタイル> <div id="レイアウト"> <div id="left">左</style>

右

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

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

<style type="text/css"> <!-- *{マージン:0;パディング:0;} ボディ{font:36px ボールド; カラー:#F00; テキスト-整列:センター;} #layout{背景:#FF9;オーバーフロー:自動;ズーム:1;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </スタイル> <div id="レイアウト"> <div id="left">左</style>

右

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

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

<style type="text/css"> <!-- *{マージン:0;パディング:0;} ボディ{font:36px ボールド; カラー:#F00; テキスト-整列:センター;} #layout{背景:#FF9;} #layout:after{表示:ブロック;クリア:両方;コンテンツ:"";可視性:非表示;高さ:0;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </スタイル> <div id="レイアウト"> <div id="left">左</style>

右

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

これら 3 つの方法にはすべて、一定の欠点があります。それらを使用する場合は、最適なものを選択する必要があります。比較すると、2 番目の方法の方が望ましいです。上記のメソッドはオリジナルではなく、すべてインターネットから得たものであり、ここにまとめられています。オリジナルの作成者がすべての権利を留保します。