DivCSS エクスペリエンス: Float をクリアするための 3 つの実践的な CSS メソッド

DivCSS の Web ページ レイアウトを使用する場合、float が頻繁に使用されます。float を削除する方法は、過去に数多く紹介されています。 float をクリアすることは必須であり、いつでも親要素から float をクリアすることは、CSS を記述する際の良い習慣の 1 つと考えられています。

今日のチュートリアルを見てみましょう。これはクリアされていないフローティング ソース コードです。コードを実行すると、親要素の明るい黄色の背景が表示されません。


フロートをクリアする前の図に示すように:



1. 空のラベルを使用してフロートをクリアします

私が長い間使用してきた方法は、空のタグを div タグまたは P タグにすることです。私は十分短い <P> を使用することに慣れていますが、多くの人は <hr> も使用しますが、その境界線をクリアする必要があるだけですが、理論的には任意のタグにすることができます。このメソッドは、浮動親要素内のすべての浮動要素をクリアする必要がある後にフロートをクリアするタグを追加し、そのための CSS コード:clear:both を定義します。このアプローチの欠点は、無意味な構造要素が追加されることです。


2. オーバーフロー属性を使用する

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


3. 疑似オブジェクトの後に使用すると、明確に浮かび上がります。

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


クリアフローティング後の図に示すように:


これら 3 つの方法にはそれぞれ長所と短所があるため、使用する場合は最適なものを選択する必要があります。比較すると、2 番目の方法の方が適しています。