CSS フローティング (float、clear) 人気の解説_html/css_WEB-ITnose

私はずっと前に CSS に触れてきましたが、フローティングについてはいつも非常に混乱していました。私の理解が不十分だったのかもしれませんし、人気のあるチュートリアルに出会っていなかったのかもしれません。

数日前、Xiaocai はついにフローティングの基本原理を理解しました。それを皆さんと共有するのが待ちきれません。

前に書いたもの:

CSS コンテンツが膨大なため、Xiao Cai には最初から最後まで説明するエネルギーがありません。彼はそれを的を絞った方法でしか説明できない。読者が CSS ボックス モデルについては理解しているがフロートについては理解していない場合は、この記事が役に立ちます。

おかずのレベルは限られており、この記事は単なる入門チュートリアルです。不適切な点がある場合はご了承ください。

この記事では、例として div 要素のレイアウトを取り上げます。

チュートリアルを開始します:

まず、div がブロックレベルの要素であり、ページ上の排他的な行を占め、配置されていることを知っておく必要があります。上から下へ、これが伝説の流れです。

以下に示すように:

div1 の幅が非常に小さい場合でも、ページ内の 1 行で対応できることがわかります。 div1 と div2、および div2 も可能です。 div 要素は独自の行にあるため、div1 の後にはランク付けされません。

上記の理論は標準フローの div を参照していることに注意してください。

Xiaocai は、レイアウトがどんなに複雑であっても、基本的な出発点は「複数の div 要素を 1 行に表示する方法」であると考えています。

明らかに、標準ストリームでは需要を満たすことができないため、フロートを使用する必要があります。

フローティングは、div 要素を標準フローから切り離し、標準フローの上にフローティングすることとして理解できます。標準フローと同じレベルではありません。

たとえば、上の図の div2 が浮いたとすると、標準フローから外れますが、div1、div3、div4 はまだ標準フロー内にあるため、div3 が自動的に上に移動します。そして div2 の位置を占めます。ストリームを再構築します。図に示すように:

図からわかるように、div2 は float に設定されているため、標準フローには属さず、div3自動的に上に移動して div2の位置にdiv1、div3、div4を並べて新たなフローを形成します。また、float は標準フローの上に浮いているため、div2 が div3 の一部をブロックし、div3 が「短く」見えるようになります。

ここで div2 は左フローティング (float:left;) を使用していますが、これはフローティングで左に配置されていると理解できます。右にフローティング (float:right;) は当然右に配置されます。ここでの左右とは、ページの左端と右端を指します。

div2 を右にフロートすると、次のようになります。

このとき、div2 は右端に配置されます。ページの一部が削除され、 div3 がブロックされなくなると、読者は上記の div1、div3、および div4 で構成されるフローを明確に確認できます。

これまでのところ、div 要素を 1 つだけフロートさせていますが、さらに多くの要素をフローティングするにはどうすればよいでしょうか?

次に、div2 と div3 の両方に left float を追加します。その効果は次のとおりです。

同様に、div2 と div3 は浮動であるため、 、それらはもはや標準フローに属していないため、div4 は自動的に上に移動して div1 と「新しい」標準フローを形成します。フローティングは標準フロー上でフローティングであるため、div2 は再び div4 をブロックします。

えー、本題に入りますが、div2 と div3 が同時に float に設定されている場合、div3 は div2 に従うことになります。これまで div2 がすべての浮動小数点に設定されていたことに気づいたかどうかはわかりません。たとえば、これは div1 に従いません。したがって、次の重要な結論を導き出すことができます。

div 要素 A が浮動小数点であり、A 要素の前の要素も浮動小数点である場合、A 要素は前の要素に続きます (これら 2 つの要素を 1 つの行に配置できない場合、A 要素は次の行に押し込まれます); A 要素の前の要素が標準フロー内の要素である場合、A の相対的な垂直位置は変わりません。つまり、A の上部は常に前の要素の下部と位置合わせされます。

div の順序は、HTML コード内の div の順序によって決まります。

ページの端に近い端が表面、ページの端から遠い端が裏面です。

読者の理解を助けるために、さらにいくつかの例を示します。

div2、div3、div4 を 左 フローティングに設定すると、効果は次のようになります。

によると上記の結論については、Xiaocai に従って理解してください。 div4 の分析から開始すると、上位要素 div3 が浮動していることがわかり、div4 は div3 に従うことになります。div3 は、上位要素 div2 も浮動であることがわかり、div3 は div2 に従うことになります。 ; そして div2 は、上部要素 div1 が標準フロー内の要素であることを検出するため、div2 の相対的な垂直位置は変更されず、上部は依然として div1 要素の下部と位置合わせされます。フローティングのままなので、左側がページの端に近いので左側が前になるので、div2は一番左になります。

div2、div3、および div4 がすべて 右 フローティングに設定されている場合、効果は次のようになります:

原理と左フローティング 基本的には同じですが、対応関係に注意が必要です。右に浮かせているので、右側がページの端に近いので、右側が前になるので、div2 は一番右になります。

div2 と div4 を左にフローティングすると、効果は次のようになります:

結論から言えば、div2 と div4 はフローティングで標準フローから外れているため、div3 は自動的に上に移動して div1 と標準フローを形成します。 div2 は、前の要素 div1 が標準フロー内の要素であることを検出するため、div2 の相対的な垂直位置は変更されず、div1 の下部に揃えられます。 div4 は、前の要素 div3 が標準フロー内の要素であることを検出します。そのため、div4 の上部は div3 の下部と位置合わせされます。これは常に当てはまります。これは、図からわかるように、div3 が上に移動した後、div4 も同様であるためです。 div4 は常に、その上部が前の要素 div3 (標準フローの要素) の下部と揃うようにします。

ここまでで、フロートの追加をマスターした読者の皆さんおめでとうございます。ただし、フロートのクリアも上記に基づいて非常に簡単に理解できます。

上記の検討により、フローティング前、つまり標準的なフローでは要素は垂直に配置されていますが、フローティング後は水平に配置されていることがわかります。

フロートをクリアすることは、水平配置を破壊することと理解できます。

float をクリアするためのキーワードは次のとおりです。

• 構文: clear: none | left |
値:
• none : デフォルト値。フローティング オブジェクトは両側で許可されます
  left: フローティング オブジェクトは左側で許可されません
  right: フローティング オブジェクトは右側で許可されません
  both: フローティングオブジェクトは許可されません

定義は非常に理解しやすいですが、実際に使用すると、これが当てはまらないことに気づくかもしれません。

定義に間違いはありませんが、あまりにも曖昧すぎて途方に暮れてしまいます。

上記の基準によれば、ページ上に div1 と div2 の 2 つの要素しかない場合、両方とも左フローティングになります。

これ div1 と div2 の両方が float の場合、ルールに従って div2 は div1 に続きますが、div1 が float ではなく div2 が左側に残るのと同じように、div2 が div1 の下に配置されることを期待します。

現時点では、clear float (clear) が使用されます。純粋に公式の定義に従う場合、読者は次のように記述しようとするかもしれません。 div1 の右側は許可されていません。 div2 は浮動要素であるため、ルールに従って自動的に 1 行下に移動します。

実際、この理解は間違っており、効果はありません。結論を見てみましょう:

CSS のクリアフロート (クリア) に関しては、覚えておく必要があります。このルールはクリアを使用する要素自体にのみ影響し、他の要素には影響しません。

どう理解しますか?上の例で、 div2 を移動させたいのですが、 div1 要素の CSS スタイルで Clear float を使用し、 div1 の右側のフローティング要素をクリアする (clear:right;) ことで div2 を強制的に下に移動させようとしています。このクリア float は div1 で呼び出されるため、これは div1 にのみ影響し、div2 には影響しません。

Xiaocai の結論によると、div2 を下に移動したい場合は、div2 の CSS スタイルで float を使用する必要があります。この例では、div2 の左側に浮動要素 div1 があるため、div2 の CSS スタイルで clear:left; を使用して浮動要素を div2 の左側に表示できないように指定している限り、要素、div2 は強制的に 1 行下に移動します。

では、ページ上に div1 と div2 の 2 つの要素しかなく、両方ともフローティングである場合はどうなるでしょうか?このとき、読者は次のようにシーンを自分で推測できるはずです:

div2 を div1 に下げたい場合は、どうすればよいでしょうか。

同様に Xiaocai の結論に基づくと、div2 を移動したい場合は、div2 の CSS スタイルで float を呼び出す必要があります。float は、それを呼び出す要素にのみ影響を与えることができるためです。

div2 の右側に浮動要素 div1 があることがわかります。div2 の CSS スタイルで clear:right; を使用して、浮動要素をその上に表示できないように指定できます。 div2 の右側にあるため、div2 は強制的に 1 行下に移動し、div1 の下に配置されます。

この時点で、読者は CSS+DIV 浮動配置の基本原則を習得しており、一般的なレイアウトを扱うには十分です。

実際、読者が注意深く理解している限り、レイアウトがどれほど複雑であっても、Xiaocai がまとめたルールによって解決することができます。

最後に書かれています:

CSS は非常にわかりにくく、特にブラウザーの互換性の問題については、この記事のレベルが限られていると厳粛に述べなければなりません。読者の皆様には不適切な部分があるかもしれませんが、ご容赦いただければ幸いです。

本当は、こんなに長い記事は書きたくないのですが、読者の皆さんに理解していただくために、どうしても例を増やしたくなります。

読者の心理的プレッシャーを軽減するために、この記事には CSS または HTML コードが含まれていません。多くのチュートリアルには大量の CSS コードが含まれており、注意深く読むことはおろか、見るのも面倒だからです。

最後に、読者の皆様が幸せな読書と幸せな知識の習得をお祈りいたします。

著者：楊源 記事の出典：http://www.cnblogs.com/iyangyuan