ホームページ > 記事 > ウェブフロントエンド > フロートをクリアする方法にはどのようなものがありますか?
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>レンダリング: 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 サイトの他の関連記事を参照してください。