html5でfloatをクリアする属性とは何ですか?

HTML5 では、フロートをクリアする属性は「clear」です。 clear 属性は、要素のどちら側が他の浮動要素を許可しないかを指定します。「clear:both;」スタイルが浮動要素に設定されている場合、要素の左側または右側のどちらも許可されないように、浮動要素をクリアできます。浮くことが許される。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

HTML5 では、フロートをクリアする属性は「clear」です。

#clear 属性は、要素のどの側で他のフローティング要素を許可しないかを指定します

clear 属性を詳しく見てみましょう。

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

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

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

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

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

フローティングとは、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 はページの右端に配置されます。上記の div1、div3、div4 で構成されるフローがはっきりとわかります。

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

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

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

ああ、ここが本題です。div2 と div3 が同時に float に設定されている場合、div3 は div2 に続きます。読者が気づいたかどうかはわかりませんが、これまですべての例で div2 が float になっていました。 . ですが、div1 に従いません。したがって、次の重要な結論を導き出すことができます。

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

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

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

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

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

上記の結論に基づいて、Xiao Cai に従って理解してください: 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 (標準フローの要素) の下部と揃うようにするためです。

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

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

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

フロートをクリアするためのキーワードは明確です。正式な定義は次のとおりです:

構文:

clear : none | left | right | both

値:

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

left : フローティング オブジェクトは左側で許可されません

right : フローティング オブジェクトは右側で許可されません

Both : フローティングオブジェクトは許可されません

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

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

上記の基準に基づいて、ページ上に div1 と div2 の 2 つの要素しかない場合、両方とも左フローティングになります。シナリオは次のとおりです:

この時点では div1、div2 は両方ともフローティングです。ルールによれば、div2 は div1 に続きますが、div1 がフローティングではなく、div2 が左にフローティングされているのと同じように、div2 が div1 の下に配置されるようにします。

このとき、clear float (clear) を使用していますが、純粋に公式の定義に基づいている場合、読者は次のように書こうとするかもしれません: div1 の CSS スタイルに、clear:right; を追加します。 div1 の右側は許可されていないこと、浮動要素があること、div2 は浮動要素であるため、ルールを満たすために自動的に 1 行下に移動します。

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

CSS のクリアフロート (クリア) に関しては、このルールはクリアされる要素自体にのみ影響し、他の要素には影響しないことを覚えておいてください。

どのように理解すればよいでしょうか?上の例では、 div2 を移動させたいのですが、 div1 要素の CSS スタイルで Clear float を使用し、 div1 の右側のフローティング要素をクリアすることで div2 を強制的に下に移動させようとしています (clear:right;) 。このクリア 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 の右側に配置され、div2 が強制的に下に移動します。div1 の下に 1 行配置されます。

関連する推奨事項: 「html ビデオ チュートリアル 」

以上がhtml5でfloatをクリアする属性とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。