css3でfloatをクリアするいくつかの方法は何ですか

方法: 1. 空の div タグに "clear:both" スタイルを設定して float をクリアします; 2. ":after" 疑似要素を親要素に追加して、疑似要素の float をクリアします. float をクリアするには; 3. 親要素にオーバーフロー スタイルを設定すると、属性値が表示されなくても float をクリアできます。

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

css3 でフロートをクリアするいくつかの方法は何ですか。

Float (float) は、フローティング ボックスが別のフローティング ボックスまたはその外端にあるボックスを含むボックスに遭遇するまで左右に移動するように制御できます。 。フローティング ボックスはドキュメント フローの通常のフローに属しません。要素がフローティングされると、ブロック レベルの要素のレイアウトには影響しませんが、インライン要素のレイアウトにのみ影響します。

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

上の図の親要素の高さはパディングによって発生します。その結果、親要素には高さが設定されていません。

親要素の高さが設定されていない場合:

親要素内の子要素が float に設定されていない場合、親要素の高さは自動的に拡張され、高さの値が表示されます;

親要素内の子要素が float に設定されている場合、親要素の高さは自動的に拡張されず、高さの値は存在しません。

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

親要素のマージンが影響を受け、上下左右の中央に配置できません。 .

親要素の高さが設定されていない場合、フローティング後に親要素の高さが拡張されないため、親要素はディスプレイに表示されません。

CSS でフロートをクリアするにはどうすればよいですか?フロートをクリアする方法はいくつかありますか?

(1) フローティングをクリアするには、clear:both を使用します。

コード内に空の div タグを挿入し、このタグに clear:both を設定します。ページ上のフローティング効果をクリアします。シンプルさ、利便性、互換性の高さが利点ですが、構造上の混乱を引き起こし、後のメンテナンスに役立たないため、この方法の使用は一般的に推奨されません。

<div style="clear: both"></div>

(2) 疑似要素を使用する:after float をクリアします

親要素に :after 疑似要素を追加します。疑似要素の float をクリアすることで、親要素の高さをサポートする目的が達成されます

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
    }

(3 ) CSS

の overflow 属性を使用します。overflow:hidden または overflow:auto のいずれであっても、親要素にオーバーフロー スタイルが設定されている場合、float は値が表示されない限りクリアできます。本質は、親要素

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

の高さをサポートする効果を達成するために BFC を構築することです (学習ビデオ共有: css)ビデオチュートリアル)

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