CSS フロート（float, clear）の人気の解説と体験談

私はかなり昔に CSS に触れましたが、フローティングについてはいつも混乱していました。私の理解が浅かったせいか、人気のチュートリアルに出会わなかったせいかもしれません。

数日前、シャオカイはついに浮遊の基本原理を理解し、それをみんなと共有するのが待ちきれませんでした。

前に書かれた言葉:

CSS には多くの内容が含まれているため、Xiaocai には最初から最後まで説明するエネルギーがなく、対象を絞ってしか説明できません。

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

私のレベルは限られており、この記事は単なる入門チュートリアルです。不適切な点がありましたらご容赦ください。

この記事では、div 要素のレイアウトを例に説明します。

チュートリアル開始:

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

div1 の幅が非常に小さい場合でも、div1 と div2 はページの 1 行に収まり、div 要素が 1 行を占めるため、div2 は div1 の後ろに配置されないことがわかります。

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

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

明らかに、標準フローではニーズを満たすことができなくなったため、フローティングが使用されます。

フローティングとは、div要素を標準フローから分離し、標準フローの上に浮かせ、標準フローと同じレベルにならないようにすることを意味します。

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

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

ここで、div2 は左フローティング (float:left;) を使用しており、これはフローティング後に左に配置されることを意味します。また、右フローティング (float:right;) は、当然ながら右に配置されることを意味します。ここでの左と右は、ページの左端と右端を指します。

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

このとき、div2 はページの右端近くに配置され、div3 をブロックしなくなりました。読者は、前述の div1、div3、div4 で構成されるフローを明確に確認できます。

これまでは div 要素を 1 つだけフロートさせていましたが、複数の場合はどうなるでしょうか?

次に、div2 と div3 に左フローティングを追加します。効果は次のようになります。

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

えーっと、ここで問題です。div2 と div3 が同時にフロートするように設定されている場合、div3 は div2 に従います。これまでのところ、div2 はすべての例でフロートしていますが、div1 に従っていないことに読者は気付いたでしょうか。したがって、重要な結論を導き出すことができます。

div要素 Aがフローティングで、要素 A の上の要素もフローティングの場合、要素 A は前の要素に従います(これらの 2 つの要素が 1 行に収まらない場合は、要素 A は次の行に詰め込まれます) 。要素 A の上の要素が標準フローの要素である場合、要素 A の相対的な垂直位置は変更されません。つまり、要素 A の上部は常に前の要素の下部に揃えられます。

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

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

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

div2、div3、div4 を float leftに設定すると、効果は次のようになります。

上記の結論に基づいて、Xiaocai に従って再度理解します。div4 から分析を開始すると、上部の要素 div3 がフローティングであることがわかり、div4 は div3 に従います。div3 は上部の要素 div2 もフローティングであることがわかり、div3 は div2 に従います。div2 は上部の要素 div1 が標準フローの要素であることがわかり、div2 の相対的な垂直位置は変更されず、上部は依然として div1 要素の下部に揃えられます。左フローティングなので、左側がページの端に近く、左側が前面になり、div2 は左端になります。

div2、div3、div4 がすべて float rightに設定されている場合、効果は次のようになります。

原理は基本的に左浮きと同じですが、表と裏の対応に注意する必要があります。右フローティングなので、右側がページの端に近く、右側が前面になり、div2 は右端にあります。

div2 と div4 を左にフロートすると、効果は次のようになります。

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

ここまでで、フロートの追加をマスターできた読者の皆さん、おめでとうございます。しかし、フロートのクリアもあります。上記の基礎知識があれば、フロートのクリアは非常に簡単に理解できます。

上記を学習すると、要素がフロートする前、つまり標準フローでは垂直に配置され、フロート後は水平配置として理解できることがわかります。

フロートをクリアすることは、水平方向の配置を崩すことを意味します。

フロートをクリアするためのキーワードは clear であり、公式の定義は次のとおりです。

文法：

クリア: なし | 左 | 右 | 両方

価値：

none : デフォルト値。両側に浮遊物を配置可能

左: 左側に浮遊オブジェクトを配置することはできません

右: 右側に浮動オブジェクトを配置することはできません

両方: 浮遊物は許可されません

定義は非常にわかりやすいのですが、実際に使用するとそうではないことに読者は気づくかもしれません。

定義は間違っているわけではないが、あまりにも曖昧で、私たちを困惑させているだけだ。

上記の基礎に基づいて、ページ上に div1 と div2 の 2 つの要素のみがあり、両方ともフローティング状態になっている場合、シナリオは次のようになります。

この時点で、div1 と div2 は両方ともフローティングです。ルールによれば、div2 は div1 に従いますが、div1 がフローティングではなく、div2 が左にフローティングするのと同じように、div2 を div1 の下に配置する必要があります。

このとき、フロートをクリアする必要があります。公式の定義に単純に従うと、読者は次のように記述しようとするかもしれません。div1 の CSS スタイルに clear:right; を追加します。これは、div1 の右側にフローティング要素を配置できないことを意味します。div2 はフローティング要素であるため、ルールを満たすために自動的に 1 行下に移動します。

実際のところ、この理解は誤りであり、何の効果もありません。サイドディッシュを見る:

CSS のclear floatの場合、このルールは clear を使用する要素自体にのみ影響し、他の要素には影響しないことを覚えておくことが重要です。

どのように理解しますか?上記の例では、div2 を移動させたいのですが、div1 要素の CSS スタイルで clear float を使用して、div1 の右側のフローティング要素をクリアすることで div2 を下に移動させようとしています (clear:right;)。clear 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 コードで始まり、注意深く読むどころか、見ているだけでも煩わしいからです。

最後に、読者の皆様が楽しい読書と知識の獲得を楽しんでいただけることを祈念いたします。