フローティング CSS_html/css_WEB-ITnose をクリアする 3 つの方法

フロートのいくつかの重要なポイントについて話しましょう:
フロートは左右にのみフロートし、上下にはフロートしません。

要素がフローティングに設定されると、その要素は 通常のフローから切り離され (position:Absolute; と同じ)、元のレイヤーのスペースを占有せず、次のレイヤーの要素をカバーします。

Floating は、この要素の前の兄弟要素には影響を与えません。

フローティング後、要素の次の兄弟要素は、以前にフロートに設定されていない要素のすぐ後ろに配置されます (要素が通常のフローから外れているか、このレベルにないため、理解しやすいですが、したがって、次の An 要素は当然その位置を埋める必要があります)。

要素の次の兄弟要素にインライン要素 (通常はテキスト) がある場合、その要素は要素の周囲に表示され、「画像を囲むテキスト」と同様の効果が作成されます。 (徹底考察、CSS floatの詳しい解説と展開(1)の説明を参照してください。)

次の兄弟要素も同じ方向にfloatに設定されている場合は、この要素の直後に表示されます。
この要素は をブロック レベルの要素 に変換します。これは、要素に対して display: block; (position:Absolute; と同じ) を設定するのと同等です。

CSS でフローティングを解除する方法は何ですか? float は頻繁に使用され、float によって多くの悪影響が引き起こされる可能性があります。float をクリアすることは必須であり、CSS を作成する際には常に親要素から float をクリアすることも良い習慣と考えられます。
今日のチュートリアルを見てみましょう。これはクリアされていないフローティング ソース コードです。コードを実行すると、親要素の明るい黄色の背景が表示されません。

1 <style type=”text/css”> 2 <!?     *{margin:0;padding:0;}     3 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;} ?> 4 </style> 5 <div id=”layout”>     6 <div id=”left”>Left</div>     7 <div id=”right”>Right</div>8 </div>

1. 空のタグを使用してフローティングをクリアする 私が長い間使用してきた方法です。空のタグは div タグまたは P タグです。私は十分短い dc6dce4a544fdca2df29d5ac0ea9906b を使用することに慣れていますが、多くの人は f32b48428a809b51f04d3228cdf461fa も使用しますが、境界線は別途クリアする必要がありますが、理論的にはどのラベルでも構いません。このメソッドは、浮動親要素内のすべての浮動要素をクリアする必要がある後にフロートをクリアするタグを追加し、そのための CSS コード:clear:both を定義します。このアプローチの欠点は、無意味な構造要素が追加されることです。 2. オーバーフロー属性を使用します

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

 1 <style type=”text/css”>  2 <!?     *{margin:0;padding:0;}      3 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;}      4 .clr{clear:both;}  5 ?>  6 </style>  7 <div id=”layout”>      8 <div id=”left”>Left</div>      9 <div id=”right”>Right</div>     10 <div class=”clr”></div> 11 </div>

3. after 擬似オブジェクトを使用して明確に浮遊させます

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

これら 3 つの方法にはそれぞれ長所と短所があります。比較して、2 番目の方法の方が望ましいです。