ホームページ  >  記事  >  ウェブフロントエンド  >  フロートをクリアする方法にはどのようなものがありますか?

フロートをクリアする方法にはどのようなものがありますか?

清浅
清浅オリジナル
2018-12-13 15:21:5359995ブラウズ

float をクリアする方法には、clearboth、clearfix の設定、オーバーフロー、親要素への二重疑似要素の設定などがあります。

コードを書くとき、float 要素の使用が原因で、 、ページ上の一部の要素が正しく表示されない場合は、次の記事でフロートをクリアするいくつかの方法を詳しく紹介しますので、ある程度の参考になると思います。

【おすすめコース:CSSコース

フロートをクリアする方法にはどのようなものがありますか?

##Floating Consequences :

(1) フローティング要素はドキュメント フローの外にあるため、親要素の高さを拡張できず、親要素と同じレベルの要素に影響します

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

例: 1 つの div に 3 つの div を設定し、3 つの div で親要素を展開させます

<style>
    .box{border:1px solid #ccc;background:pink;}
    .red{width:100px;height:100px;background: red;}
    .green{width:100px;height:100px;background:green;}
    .blue{width:100px;height:100px;background: blue;}
</style>
<body>
<div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

レンダリング:

フロートをクリアする方法にはどのようなものがありますか?

float:left を追加した後、親要素を開けなくなります

フロートをクリアする方法にはどのようなものがありますか?

方法フロートをクリアします

(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) オーバーフローメソッドの使用

親要素にオーバーフロースタイルが設定されている場合、overflow:hidden または overflow:auto のどちらでもフロートをクリアできます。値が表示されない限り、その本質は BFC を構築することです。これにより、親要素の高さをサポートする効果が得られます。

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

(4) 二重擬似要素メソッドの使用

親要素を与えることで、float をクリアする効果を実現するために二重の疑似要素を設定します。

 .clearfix:before,.clearfix:after {
     content: "";
     display: block;
     clear: both;
}

要約: 以上がこの記事の全内容です。この記事を読めば誰でもフロートをクリアする方法が理解できます


以上がフロートをクリアする方法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。