フロートのクリアについて簡単に理解します。 _html/css_WEB-ITnose

CSS を学ぶとき、float を使用するとレイアウト スタイルに非常に便利ですが、それに伴って、float のクリアに関する問題も発生します。私の簡単な見解をいくつかお話します。まず、なぜフローティングをクリアする必要があるのか​​というと、フローティングによりラベルがドキュメント フローから切り離され、親要素 (境界線、コンテンツ) だけでなく、前後の要素の要素にも影響が出るからです。

フロートをクリアする方法について話しましょう:

1

高さを定義します

子要素がフロートに設定されている場合、ドキュメント フローから切り離されるため、固定または最小の高さを親要素に追加します。親要素がフローティングになるため、境界線を開くことができません。したがって、

"height:" または "min-height:" を追加してそれを解決できます。

この方法の利点は、始めるのが簡単で、理解しやすいことです。在の欠点は、高さを詳細に決定する必要があり、柔軟性に欠けることです。

2

clear:bothを使用する

親要素の終了タグにclear:bothを追加します。親要素内に空のタグを追加して、その周囲のフロートが無視されることを宣言します。 html in

css in .clear{

clear:both

}

この方法の利点は、シンプルで便利であることです。 「在」の欠点は、プログラミングでは空のラベルを多数追加することが最もタブーであり、将来の変更に問題が生じることです。

3

overflow: hidden を使用します

親要素の CSS に overflow: hidden を追加します。オーバーフロー: オーバーフロー、非表示: クリアの意味を見てみましょう。つまり、オーバーフローした部分はクリアされ、その内容は表示されません。これを使用すると、浮動属性の

をクリアすることになることがわかります。

."class name"{ overflow: hidden

}

このメソッドの利点は、コードの使用量とエラーが少ないことです。 「在」の欠点は、余分な部分が削除されるため、位置と一緒に使用できず、同時に高さを定義できないことです。

上記の 3 つの方法は、私が CSS を初めて使用したときにフロートをクリアするために学んだ方法であり、Web 初心者としての私の能力には限界があり、問題の解決策が最善であるとは限りません。ようこそ。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。