体験共有：CSS float（フロート、クリア）人気解説（再録）_html/css_WEB-ITnose

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

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

前 前 前 前 前

は、最初から最後まで、的を絞った説明でのみ説明できます。

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

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

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

开始 开始 开始 开始

DIV は、ページ内で独占され、上から下に配置されるブロックレベルの要素であることを最初に知っておく必要があります。

。以下の図に示すように:

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

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

は、どんなに複雑なレイアウトであっても、その基本的な出発点は「複数の

Div 要素を 1 行に表示する方法」であると考えています。 標準ストリームでは需要を満たすことができないのは明らかです。 フローティングは、特定の div 要素を標準フローから切り離し、標準フローと同じレベルではない標準フローの上にフローティングすることとして理解できます。 たとえば、上の図の div2 が浮いていると仮定すると、標準フローから外れますが、div1、div3、div4 はまだ標準フロー内にあるため、div3 は自動的に上に移動し、div2 の位置を占めます。 、フローを再編成します。図に示すように: div2 が float に設定されているため、div3 が自動的に上に移動して 、div2 の位置を置き換えていることがわかります。 、div3、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 つの要素を 1 行に配置できない場合、A🎜🎜 要素は次の行に押し込まれます)🎜🎜 A🎜🎜 要素の前の要素が標準ストリームの要素の場合、A🎜🎜 の相対的な垂直位置は変更されません。これは、A🎜🎜 の上部が常に前の要素の下部と位置合わせされることを意味します。 🎜🎜 🎜 🎜div🎜🎜の順序は、HTML🎜🎜コード内のdiv🎜🎜の順序によって決まります。 🎜🎜

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

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

假如我们掴div2、div3、div4都設置成左浮動、效果如下：

上边の结论に基づき、跟着小菜理解一遍：先黎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 (

標準フローの要素) の下部と位置合わせされていることを確認してください。 この時点で、フロートの追加をマスターした読者はおめでとうございますが、フロートのクリアも上記の基礎を使えば非常に簡単に理解できます。上記を学ぶと、要素がフローティングされる前は垂直に配置される標準的なフローになっていることがわかり、フローティングされた後は水平に配置されることが理解できます。 floatsフロートが片付けられていることは、水平方向の配置を破ると理解できます。

out off out through out out outmb out outmbole out rightmb right out out out out out out out out out out out out out of to - - - 、および

デフォルト値。フローティングオブジェクトは、両側で許可されます。

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

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

CSS

をクリアするには、次のことに留意する必要があります: このルールは、削除要素自体の使用にのみ影響し、他の要素には影響しません。

どうやって理解しますか？上の例では、 div2 を移動させたいのですが、 div1 要素の CSS スタイルで Clear float を使用し、 div1 の右側のフローティング要素をクリアすることで div2 を強制的に下に移動させようとしています (clear:right;) 。このクリア浮動小数点は 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 コードが含まれており、注意深く読むことはおろか、見るだけでうんざりするからです。

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

この記事は以下から転載されています:

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html