CSSのfloatの詳しい解説とfloatをクリアする3つの方法

floatingについて話す前に、CSS1のmargin属性

の2つの特殊な現象、

marginsのマージ現象について話しましょう:

2つのpが上下にソートされている場合、上のものを設定しますp

margin-bottom、margin-topを次の p に設定すると、2 つのマージンがマージされ、マージ後の値が大きい方のマージンが発生します。

通常、この現象に対処する必要はありません。

2. マージン崩壊現象:

大きなボックスに小さなボックスが含まれており、小さなボックスに margin-top を設定すると、大きなボックスも一緒に下に移動します。

解決策:

1.0 大きなボックスに境界線 b

order 属性を追加します。

2.0 は、大きなボックスに

overflow 属性を設定します。

3.0はfloatを使用します。

補足: オーバーフローの共通属性は次のとおりです:

フローティング

フローティングは CSS の重要なポイントです。なぜフローティングを使用するのでしょうか?

は、複数のボックスを1行に表示する問題を解決することです。

float: left; float: right;

float には 3 つの特徴があります:

1. 標準的なフローから外れ、位置を占有しません。

2、要素 display のデフォルトの表示モードをブロック レベル要素に変更します。

3. フローティング要素は次のブロックレベル要素のみをカバーし、前のブロックレベル要素には影響しません。

標準ストリームとは何ですか?

は、ボックスを配置するためのデフォルトのブラウザ標準です。

標準フローの特徴:

1. ブロックレベルの要素は上から下まで 1 行を占めます。

2、インライン要素、インラインブロックレベル要素は左から右へ1行で表示されます。

3、その位置を占めます。

フローティングの影響と フローティングをクリアする 3 つの方法

ページ上のフローティングの影響:

親ボックスの中に子ボックスがあり、親ボックスが高く設定されていない場合、子ボックスはボックスは親ボックス内に移動されます。フロートが無効になっている場合、将来、親ボックスの高さは 0 になります。親ボックスの高さが 0 であるため、次の要素が自動的に埋められます。そのため、フロートは必須です。この時点でクリアされました。

Clear:both

1、追加のラベルメソッドを使用します:

フローティングボックスの下に別のラベルを置き、このラベルでclear:bothを使用して、ページ上のフローティングの影響をクリアします。 XClearfix {

クリア:

}

& lt; p class = "clearfix" & gt;

a. 外部ラベルの影響ボックスはクリアされますが、親ボックスは開きません。

注: 通常、このメソッドはフロートをクリアするためには使用されません。フロートをクリアするこの方法により、ページのラベルが増加するためです。

2. オーバーフロー属性を使用してフローティング ボックスをクリアします。

まず、フローティング ボックスの親要素を見つけて、その親要素に属性を追加して、この親要素内のフローティング子要素がフローティング ボックスに与える影響をクリアします。ページ。

height

: 0;/ / コンテンツの高さは 0 です

.

。

visible

: デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。

非表示

:

visible	: デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
非表示:	コンテンツはトリミングされ、残りのコンテンツは非表示になります。
スクロール:	コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
Auto:	コンテンツがトリミングされている場合、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
コンテンツはトリミングされ、残りのコンテンツは非表示になります。
スクロール:	コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
Auto:	コンテンツがトリミングされている場合、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。

以上がCSSのfloatの詳しい解説とfloatをクリアする3つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。