ホームページ > 記事 > ウェブフロントエンド > overflow:hidden の質問で高得点をあげてください。 _html/css_WEB-ITnose
overflow:hidden の質問で高得点をあげてください。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:09:071064ブラウズ
これは over:hidden を追加しない場合の効果です:
<div style="background:blue;"> <div style="width:100px; height:100px; background:red; float:left;"></div> </div>
これは over:hidden を使用した効果です (IE8 および 9 では、親 div はまだ表示できません):
<div style="background:blue; overflow:hidden"> <div style="width:100px; height:100px; background:red; float:left;"></div> </div>
Plus height:1 %, IEで親要素を表示できるようになりました
<div style="background:blue; overflow:hidden height:1%"> <div style="width:100px; height:100px; background:red; float:left;"></div> </div>
質問:
1. overflow: hiddenを追加すると、子要素のフローティングの影響を受けずに親要素のDIVが正常に表示されるのはなぜですか?原理は何ですか?
2. コードの 3 番目の部分、高さ: 1%。このとき、親DIVの親要素はbodyで、現在のbodyの高さは0になるはずです（子divが浮動小数点のため）？ height:1% は height:0; と同等ではないでしょうか?
たとえ 0 でなくても、固定値であるはずです。では、なぜここの親 div にも適応的な高さを持たせることができるのでしょうか。
他の方法は知っていますが、上記の 2 つの質問について混乱しています。
私の質問をよく読んでください、ありがとう！ :)
ディスカッションへの返信 (解決策)
overflow;hidden 浮動小数点数をクリアするということは、子 div が空中に浮いた状態から落ちたことを意味します。親 div が十分に高くないと、理解できない場合は、投稿にいくつか書きました。 。 。
以下の内容は、オンラインで検索して得られた回答です:
overflow:hidden この CSS スタイルは誰でもよく使用されていますが、ほとんどの人はこのスタイルについての理解がオーバーフローを非表示にすることだけに限られており、その意味についてはあまり知りません。フロートのクリア。 float をクリアする場合は、別の CSS スタイル、clear:both を考えることになります。この属性は誰もが問題なく理解できると思います。しかし、「浮遊」という言葉は何を意味するのでしょうか？以下で詳しく説明しましょう。よく使われるdivの書き方を以下に書きます。 DMX で独自の実験を行うことができます
#box{ width:500px; height:600px; }この div に overflow:hidden 属性を追加すると、この問題は解決されます。 overflow:hidden 属性はオーバーフローを非表示にするために使用されることがわかります。この属性をボックスに追加すると、コンテンツの幅と高さが自動的に非表示になります。さらに、div ボックスの高さの値を削除した後、別の実験を行ったところ、ボックスの高さは div コンテンツの高さの値によって自動的に引き伸ばされることがわかりました。とはいえ、「浮く」という言葉の意味を理解しましょう。当初は平面上に浮いているという認識でしたが、今回の実験により、それが平面上に浮いているのではなく、立体的に浮いていることが分かりました！つまり、コンテンツ div をフローティング属性で追加すると、ディスプレイ側のボックス div から分離されます。つまり、このときのコンテンツの幅と高さはどれくらいになるでしょうか。切り離されたボックスでは動作しません。 float という言葉の意味を完全に理解すると、overflow:hidden 属性の説明と float をクリアする意味が理解できるようになります。つまり、ボックス div に overflow:hidden 属性を追加すると、コンテンツおよびフローティング属性を持つ他の div の 3 次元フローティングが解除されます。これは、フロートをクリアするための overflow:hidden 属性の正確な意味です。ボックス div の高さを設定しない場合、コンテンツ div の高さによってボックス div が拡張されることに注意する必要があります。ボックス div に高さの値を追加すると、それは関係ありません。 div コンテンツの高さは何ですか、ボックスの高さは設定した値です。コンテンツの高さがボックスの高さを超える場合、超えた部分は非表示になります。これが隠れたオーバーフローの意味です。
overflow;hidden清除浮动就是指子div从飘在空中的状态落下来了，如果父div高度不够，那么就要被影响，你试着从三维的空间去想想，没看明白的话我在你的那个帖子里写了一些。。。
我看到了，但是还是没太理解~而且div默认height不是100%吧？height如果是百分比，就是只相对于父元素的，div里如果没内容那height就应该是0~
没加over:hidden是这样的效果:
HTML code
5167bdf3fbfed6d37670fa4293b493b2
58a245677aa23a6364813a2f576e7c8d16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
加了over:hidden是这样的效果（在IE8、9下，仍然无法显示父div）：……
http://www.chinaz.com/design/2008/0818/35473.shtml参考这个
引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code
5167bdf3fbfed6d37670fa4293b493b2
58a245677aa23a6364813a2f576e7c8d16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
加了over:hidden是这样的效果（……
嗯我好像明白了！
第2个问题能帮我看下吗？
1，overflow:hidden;是让子元素不溢出，而本身的div没有设置height属性,这样一来标准浏览器就去检测子元素的高。
2，height：1%是用来触发元素hasLayout，类似的可以用zoom:1替代；
引用 4 楼 wangyao1135 的回复:
引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code
5167bdf3fbfed6d37670fa4293b493b2
58a245677aa23a6364813a2f576e7c8d16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
……
我没有设置body的高度，你看看效果。body的高度是0吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body{ background:#FF0000;}</style></head><body></body></html> 1，overflow:hidden;是让子元素不溢出，而本身的div没有设置height属性,这样一来标准浏览器就去检测子元素的高。
2，height：1%是用来触发元素hasLayout，类似的可以用zoom:1替代；
额。。。没太看明白~
引用 5 楼 wsy87217 的回复:
引用 4 楼 wangyao1135 的回复:
引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code
5167bdf3fbfed6d37670fa4293b493b2
那浏览器显示的效果，说明了什么问题呢。。。。
浏览器的显示效果应该能说明body不是没有高度的吧。默认的应该是和浏览器打开的一样大的。应该是宽是100%高度也是
1，浮动float 是指示一个元素忽略自己和同级的块(block)属性，尽可能紧凑地利用空间；
overflow是指示一个元素，如何占有自己的block空间；
如果父元素没有定义overflow,游览器会只有一次布局呈现，把子元素显示完了就完了。如果父元素有overflow,游览器在把子元素呈现完后会再回溯一次，重新计算空间，计算并调整父元素的显示范围。然后才继续下面的元素布局。
2，流式布局的内的元素高度百分比是无效的，百分比只有在明确指定了高度的盒式模型内才有效。在流式布局内，高度百分比会直接被忽略。
3，以上其实为本人猜测，没有深入浏览器内部，也没有见到正式的官方解释。
谢谢大家！
稍微明白点了！：）