エクスペリエンスの共有: CSS float (float、clear) 人気の description_html/css_WEB-ITnose

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

数日前、シャオカイはついにフローティングの基本原理を理解し、それをみんなと共有するのが待ちきれません。

前に書いた言葉：

CSSの内容が多いため、Xiao Caiには最初から最後まで説明する気力がなく、的を絞った説明しかできません。

読者が CSS ボックスモデルは理解しているが、float については理解していない場合は、この記事が役に立ちます。

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

この記事では div 要素のレイアウトを例に挙げます。

チュートリアルが始まります:

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

div1 の幅が非常に小さい場合でも、ページ上の 1 行で div1 と div2 を収容でき、div 要素が占有しているため、div2 は div1 の後にランク付けされないことがわかります。独自のライン。

標準フローで div になることはすべて上記で説明しています。否、认认は、どんなに複雑なレイアウトであっても、その基本的な出発点は「複数の DIV 要素を 1 行に表示する方法」であると考えています。流量 明らかに、標準流量では需要を満たすことができなくなり、フローティングに使用されます。

Floating は、特定の div 要素を標準フローから離脱させ、標準フローと同じレベルにない標準フロー上で浮動させることとして理解できます。

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

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

ここで div2 は left float (float:left;) を使っていますが、これは左にフローティングしてから配置すると理解できますし、 right float (float:right;) は当然右に配置することを意味します。ここでの左右とは、ページの左端と右端を指します。 DIV2 を使用して右に浮かせると、次のような効果になります。

このとき、DIV2 はページの右端に配置され、上記のストリームで構成される DIV1、DIV3、DIV4 が見えなくなります。

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

div2 と div3 の両方に左フローティングを追加できます。その効果は次のとおりです。表示:

「新しい」標準フロー、float は標準フローの上に浮いているため、div2 は div4 を再びブロックします。到、咳、要点は、DIV2 と DIV3 を同時にフロートに設定した後、読者が DIV2 を見つけたかどうかはわかりません。 , ただし、div1 の後には and and and and and が続きません。したがって、重要な結論が得られます。DIV 要素 A がフローティングであり、A 要素内の要素もフローティングである場合、A 要素は 2 つの要素の後ろに続き、A 要素は次の行に押し込まれます)。 ; A 要素の前の要素が標準フロー内の要素である場合、A の相対的な垂直位置は変更されません。つまり、A の上部は常に前の要素と同じになります。底。

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

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

読者の理解を助けるために、さらにいくつかの例を挙げましょう。

div2、div3、および div4 を左フロートに設定すると、効果は次のようになります:

上記の結論に基づいて、Xiao Cai で理解してみましょう。 div4 の分析から始めましょう。 上位要素 div3 が浮動していることがわかり、div4 は div3 に従うことになります。 div2 の後に div3 が続き、div2 は上部要素 div1 が標準フロー内の要素であることを検出するため、div2 の相対的な垂直位置は変更されず、上部は div1 要素の下部と整列したままになります。フローティングのままなので、左側がページの端に近いので左側が前になるので、div2は一番左になります。

div 2、div 3、div 4 を使用して右にフローティングします。右に浮かせているので、右側がページの端に近いので、右側が前になるので、div2 は一番右になります。

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

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

。

この時点で、フロートの追加をマスターした読者はおめでとうございますが、フロートのクリアも上記の基礎に基づいて非常に簡単に理解できます。上記を学ぶと、要素がフローティングされる前は垂直に配置される標準的なフローになっていることがわかり、フローティングされた後は水平に配置されることが理解できます。

フロートをクリアすることは、水平配置を破壊することと理解できます。浮動キーワードのクリアは Clear であり、正式な定義は次のとおりです。

Clear: None | Both

:

None: デフォルト値。両側のフローティング オブジェクトを許可します through out を使用して off out off off out off 's ' through out through through‐‐‐through ‐‐ ‐‐‐‐ ‐ ‐ ‐ ‐ _floating _ オブジェクトへ

_

はそうではないことがわかりました。

定義に間違いはないのですが、曖昧すぎて迷ってしまいます。 pageページ上に2つの要素div1とdiv2のみがあり、両方ともdiv2をdiv1の下に配置したい場合、div1が浮かんでいないようにします。

公式の定義に純粋に従う場合、読者は次のように記述しようとするかもしれません: div1 の CSS スタイルに float 要素が許可されていないことを意味します。 div1 の右側 div2 は浮動要素であるため、ルールに従って自動的に 1 行下に移動します。

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

どうやって理解しますか？上の例で、 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 の浮動配置の基本原則を習得しており、一般的なレイアウトに対処するには十分です。実際、その変化はその祖先から切り離せないものであり、読者がそれを経験している限り、複雑なレイアウトはおかずの要約のルールによって行うことができます。

最後に書いてあること：

CSS は非常に分かりにくい、特にブラウザの互換性の問題については、この記事には不適切な部分があるかもしれないことを厳粛に述べなければなりません。 。

本当は、こんなに長い記事を書きたくないのですが、読者に理解してもらうために、もっと例を挙げたくて仕方ありません。

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

最後に、読者が楽しく読んで知識を楽しく習得できることを願っています。