CSSフローティングはどのような問題を引き起こしますか?

CSS フローティングの影響: 1. フローティング要素はドキュメント フローの外にあるため、親要素の高さを拡張できず、親要素と同じレベルの要素に影響します。親要素が設定されていない場合、親要素はディスプレイに表示されません。 2. フローティング要素は元のドキュメント フローの位置を占めなくなり、後続の要素のレイアウトに影響を与えます。

#この記事の動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター。

推奨:

css ビデオ チュートリアル

知っておくべきこと: フローティング ボックスは、別のフローティング ボックスまたは外側の端にあるボックスに遭遇するまで、左右に移動できます。 。フローティング ボックスはドキュメント フローの通常のフローに属しません。要素がフローティングされると、ブロック レベルの要素のレイアウトには影響しませんが、インライン要素のレイアウトにのみ影響します。

現時点では、ドキュメント フローの通常のフローでは、フローティング ボックスのレイアウト モードが同じではないことが示されます。収容ボックスの高さがフローティングボックスよりも小さい場合、「

Height Collapse」が表示されます。

#親要素に高さが設定されていない場合、親要素内の子要素が float に設定されている場合、親要素の高さは自動的に拡張されません。高さの値はありません。

この方法で float を設定した後は、次のようないくつかの問題が明らかになります。

親要素のマージンが影響を受け、上下に中央揃えにすることができません。

• #親要素の高さが設定されておらず、フローティング後に親要素の高さが拡張されていない場合、親要素はディスプレイに表示されません。
まとめ: フローティングによって引き起こされる結果

(1) フローティング要素はドキュメント フローの外にあるため、親要素の高さは展開できません。親要素と同じレベルの要素に影響します。親要素の高さが設定されていない場合、親要素はディスプレイに表示されません。

(2) フローティング要素はドキュメント フローから外れ、元の位置を占めないため、フローティング要素と同じレベルにある非フローティング要素がそれに続きます。

(3) 次の場合フローティング要素は最初ではありません。フローティング要素がある場合、その要素の前の要素もフローティングである必要があります。そうしないと、ページの構造表示に容易に影響を及ぼします。

フローティング要素はもう占有しないため、元のドキュメントフローの位置がずれると、後続の要素のレイアウトに影響を与えるため、これらの問題を解決するには、この時点で要素内のフロートをクリアする必要があります。

フローティングを解消するにはどうすればよいですか?フローティングクリア処理

1. まず親のCSSの高さを設定してクリアします 一般的には高さを設定し、コンテンツの高さを100px、上下のボックスを設定します。 2px なので、ここでは親の全体の高さは 102px です。高さスタイルを使用しますが、最初にコンテンツの高さを計算する必要があります。
2. float をクリアするには、clear:both 属性を使用します。float をクリアするには、div に class="clear スタイルを配置します。

3. 親 div を定義します。属性を使用して、親によって生成された float をクリアするために、親 CSS セレクターの overflow:hidden スタイルを定義します。

以上がCSSフローティングはどのような問題を引き起こしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。