CSS で float をクリアする一般的な方法のまとめ CSS は {overflow:auto;zoom:1;} をクリアします

一般的に使用される 3 つの float のクリア メソッドがあります:

これは、クリアされていないフローティング ソース コードです。コードを実行すると、親要素の明るい黄色の背景は表示されません。

<style type=”text/css”>
<!–*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#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;}
–>
</style>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

フロートをクリアする 3 つの方法は次のとおりです:

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

を使用することに慣れていますが、多くの人は

---

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

フロートをクリアする (浮動要素を閉じる) には追加のタグを使用することが W3C推奨されています。
要素または空の

の使用については、好みに応じて選択できます (もちろん、他のブロックレベルの要素も使用できます)。ただし、
自体にはパフォーマンスがあり、余分な改行が含まれるため、パフォーマンスを隠すために高さを 0 に設定する必要があることに注意してください。したがって、ほとんどの場合、空の

を使用する方が適切です。

<style type=”text/css”>
<!–*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#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{clear:both;}
–>
</style>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
<p class=”clr”> </p>
</p>

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

ただし、オーバーフローを使用する場合は、ページのパフォーマンスに影響を与える可能性があり、その影響は不明です。

<style type=”text/css”>
<!–*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1; }/* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

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

<style type=”text/css”>
<!–*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height: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;}
–>
</style>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

これら 3 つの方法にはそれぞれ長所と短所があり、使用する場合は最適なものを選択する必要があります。私は最初の方法の方が安定していて信頼性が高くなります。

以上がCSS で float をクリアする一般的な方法のまとめ CSS は {overflow:auto;zoom:1;} をクリアしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。