<div style="background:blue; overflow:hidden;"> <div style="width:100px; height:100px; background:red; float:left;"></div></div>
なぜ overflow:hidden を使用すると float がクリアされるのか理解できません。これはどういう原理なのでしょうか?
また、この方法はIE9では使えなくなったのでしょうか?試してみましたが、うまくいきませんでした。でもFirefoxなら大丈夫ですよ。
ディスカッションへの返信(解決策)
クリアできることがわかりませんでした
クリアできることがわかりませんでした
しかし、オンラインで見た教育ビデオでは、彼は2つの方法があると言いましたfloat をクリアするには: 1. clear 2. overflow :hidden; そして、彼の場合はクリアに成功しましたが、私の場合 (IE9) では成功しませんでした。
4841a719d46fcd23a29a3f3d50bfd0e3
3109056f39f1edbbee2c9ce88e2c13b7 ;/div>
16b28748ea4df4d9c2150843fecfba68
a1707b18ac52b27dbc9597fa97fffe25 ac98884772ac609b0c7175d1dfdc065716b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
なぜ親 DIV に高さを与える必要があるのでしょうか?
また、over:hiddenを使って浮き上がりを解消する原理は何ですか?
<div style="background:#06F; overflow:hidden;"> <div style="height:50px; width:100px; float:left; background:#F00;"></div> <div style="height:100px; width:100px; background:#F0F;"></div> </div>
このように書いたときにテストしてみると、float がクリアされませんか?
HTML コード
;16b28748ea4df4d9c2150843fecfba68
<div style="background:blue;"> <div style="width:100px; height:100px; background:red; float:left;"></div></div>
フロートをクリアするという意味は、以下への影響ではありません
私の質問は、なぜ over:hidden がこの効果を実現するのかということです
ありがとう! この div には、フローティングとクリアの関数があることだけがわかります。 、気づきませんでした
忘れてください、別の投稿を開きます
私の個人的な理解を話させてください:
divで幅と高さが指定されていない場合、デフォルトの幅は0で高さは100%です;
overflow: hidden が追加されていない場合、子 div は float の影響を受け、親 div にはデフォルトで高さがありません。これは当然最初の画像の影響です。 : hidden が追加され、いわゆるフローティングが削除されます。その場合、子 div にはデフォルトで高さがありません。当然、div の高さは 100px でなければならず、親 div の幅はデフォルトで 100% でなければなりません
実際、 overflow:hidden は垂直方向のフローティングにのみ影響し、float を右に設定するとわかりやすくなります (私の個人的な理解です。正しいかどうかはわかりません...)。
声明:この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。