ホームページ > 記事 > ウェブフロントエンド > フロートをクリアする方法にはどのようなものがありますか?
フロートをクリアする方法にはどのようなものがありますか?
- 清浅オリジナル
- 2018-12-13 15:21:5360009ブラウズ
float をクリアする方法には、clearboth、clearfix の設定、オーバーフロー、親要素への二重疑似要素の設定などがあります。
コードを書くとき、float 要素の使用が原因で、 、ページ上の一部の要素が正しく表示されない場合は、次の記事でフロートをクリアするいくつかの方法を詳しく紹介しますので、ある程度の参考になると思います。
【おすすめコース：CSSコース】
##Floating Consequences :
(1) フローティング要素はドキュメント フローの外にあるため、親要素の高さを拡張できず、親要素と同じレベルの要素に影響します (2)フローティング要素はドキュメント フローから外れ、元の位置を占めないため、フローティング要素と同じレベルにある非フローティング要素がそれに続きます。
(3) フローティング要素が最初のフローティング要素でない場合、その前の要素も float にする必要があります。そうしないと、ページの構造表示に影響しやすくなります。
<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>レンダリング:
方法フロートをクリアします
(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 サイトの他の関連記事を参照してください。