ホームページ >ウェブフロントエンド >htmlチュートリアル >overflow: hidden が float_html/css_WEB-ITnose をクリアできると言われているのはなぜですか。

overflow: hidden が float_html/css_WEB-ITnose をクリアできると言われているのはなぜですか。

WBOY
WBOYオリジナル
2016-06-24 12:02:451283ブラウズ

一般に、clear: はどちらも float をクリアするために使用されますが、多くの人々は、float をクリアするために overflow: hidden を使用することがわかりました。なぜそれがフロートをクリアできるのでしょうか? (解決策)

それは、(visible) に加えて、オーバーフローはその内部の要素のブロック書式設定コンテキストを再確立するためです。Float、position ABS、Inline-block、table-cell、および table-caption はブロックレベルのスタイルではありません。フローティング オーバーフローを制御するには、クリアを使用します。これは、親要素にオーバーフローが設定されている場合、それが自動、非表示、または新しいブロック レベルでのみ行われるためです。 format はその子要素に対しても作成されるため、フローティングのクリアについてはここで確認できます。clear は古いメソッドですが、状況によってはオーバーフローよりも適切に処理できる場合もあります。
overflow:hidden 属性は、親をコンテンツに固定させることと同等で、親がそのオブジェクト内のコンテンツ (float を使用する div ボックスを含む) を固定できるようにすることで、クリアなフロートを実現します。そして、clear:both は、子レベルで float をクリアするために使用されます。使用されている場所を見れば一目瞭然です。

<div style="overflow:hidden">   <div style="float:left"></div></div>

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


は、オーバーフローにより、(目に見える) float、position ABS、inline-block、table-cell、table-caption が Block ではないことを除いて、その中の要素のブロック フォーマット (ブロック フォーマット コンテキスト) が再確立されるためです。 -level スタイルなので、フローティング オーバーフローを制御するためにクリアが使用されます。表示に加えて親要素にオーバーフローが設定されている場合、自動、非表示、またはスクロールのみがある場合、新しいブロック レベルの形式が適用されるため、フローティングもクリアできます。その子要素も作成されるため、明確なフローティング効果が得られます。具体的な情報はここで確認できます。ただし、場合によっては、オーバーフローよりも適切に処理できる場合もあります。本当に家族全員とセックスしたい!

overflow:hidden 属性は、親をコンテンツに固定させることと同じなので、オブジェクト内のコンテンツ (float を使用した div ボックスを含む) に固定することができ、それによってクリアな float が実現されます。そして、clear:both は、子レベルで float をクリアするために使用されます。使用されている場所を見れば一目瞭然です。

<div style="overflow:hidden">   <div style="float:left"></div></div>

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

わかりません。フロートがまだクリアされていない場合、親はコンテンツに近いとカウントされませんか?

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