オーバーフロークリアフローティング問題_html/css

オーバーフロークリアフローティング問題_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:32:46

オリジナル

1443 人が閲覧しました

<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) では成功しませんでした。

;/div>

なぜ親 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 コード

;

<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 を右に設定するとわかりやすくなります (私の個人的な理解です。正しいかどうかはわかりません...)。