2017-10-27 8 views
1

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbarオーバーフローはどのような影響を与えますか?このコードには隠しがありますか?

overflow:hidden.navbarに追加されたときにそれが動作し、それなしで左側が白で、テキストは右側にあるのはなぜ?また、どのように、何が、これは私が属性について読んだときに、ここでoverflowを適用する目的である:

注:overflowプロパティのみ 指定された高さのブロック要素のために動作します。

答えて

2

あなたはその要素のoverflow: hiddenすべての子要素がfloat性質を持っているとfloatがクリアされない場所がないため、左側に表示されるを削除した場合には理由block formatting context
のすべてです。 ブロックの書式コンテキストについては

あなたも参照してくださいこの回答Why does overflow hidden stop floating elements escaping their container?

を参照することができます。すべてのParent Height doesn't follow their float children

+0

この例で、floatを左にしたい場合、なぜ浮動小数点値をクリアする必要があるのですか?フロートをクリアすると、要素が重ねて表示されます。ありがとう。 – LearningMath

+0

あなたはフロートをクリアすることができます[ここ](https://css-tricks.com/the-how-and-why-of-clearing-floats/)と[ここ](https://stackoverflow.com/質問/ 12871710/what-does-the-css-rule-clear-both-do)を実行します。私は言及された例との参照のためのフィドルを作成した。 https://jsfiddle.net/3dw9y040/「

」 –

1

まず、あなたがオーバーフロー削除する場合:ナビゲーションバーから隠さを、それがメニューアイテムを作成しますその時点で背景がなく、0とボタンタグの両方がページ背景色と同じであるcolor: fff;を持っているので、背景がなくなって消えます。

ここで、なぜオーバーフローが必要なのですか。 .navbar

その中で.navbar内のすべての子は、フロートプロパティは、それらに関連して、通常のドキュメントフローの任意のスペースを取らない要素を浮かべているため。今の子要素は、任意のスペースを取っていない場合は、親のためのheightプロパティ(.navbar)は、子クラスが浮いている場合、親クラスの高さプロパティを維持するために0

で、我々は

がそれを願っていますoverflow: hidden;プロパティを使用しますhelp

+0

が追加されていることを確認してください。親の身長が0の場合、子供の身長が高い場合はどうして問題になりますか? – LearningMath

関連する問題