CSSでfloatをクリアする方法

CSS でフローティングをクリアする方法: 1. フローティング コードの後に​​、「clear:both」スタイルが設定された空の div タグを追加します。 2.「clear:both;」スタイルの after 疑似要素を親要素に追加します。 3. 親要素に「overflow: auto」スタイルを設定します。

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

コードを記述するとき、float 要素の使用により、ページ上の一部の要素が正しく表示されないことがあります。

しかし、フローティング要素を使用した後、いくつかの悪影響が生じます:

(1) フローティング要素はドキュメント フローの外にあるため、親要素の高さを拡張できません。親要素と同じレベルの要素に影響します
(2) 浮動要素はドキュメント フローから離れ、元の位置を占めないため、浮動要素と同じレベルの非浮動要素が続きます
( 3) フローティング要素が最初でない場合 フローティング要素がある場合、その前の要素もフローティングにする必要があります。そうしないと、ページの構造表示に影響しやすくなります。

この時点で、次のことが必要です。フロートをクリアする CSS メソッドをいくつか紹介します。

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

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

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

(2) 疑似要素を使用するFloatをクリアするclearfix

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

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

(3) CSS

の overflow 属性を使用します。親要素のオーバーフロー スタイルを設定するとき、overflow:hidden または overflow:auto のいずれであっても、その本質は、親要素の高さをサポートする効果を達成するために BFC を構築することです

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

(学習ビデオ共有: css 動画チュートリアル＃＃＃）＃＃＃

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