オーバーフローが発生しても機能しないのはなぜですか？

以下のコード例が見つかったとき、私はw3schoolsでhtml/cssを探していました。オーバーフローがクリップされ、コンテンツの残りの部分はのためのオーバーフローが発生しても機能しないのはなぜですか？

おかげで見えなくなります。隠されたオーバーフローの定義があるので;：ULは「隠されたオーバーフロー」を持っているときにのみ、リストを表示し、なぜ私が思っていたすべての答え:)例により、

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 

 
</body> 
 
</html>

出典

2016-10-08 Herrsocke

あなたはW3Schoolsのは、あなたが参照しているリンクを提供できますか？ –

内部に要素を浮動させると、隠れたオーバーフローが引き続き表示されます。 ul要素が崩壊しないことを確認するのはちょっとした方法です。 – Daniel

オーバーフローを追加しない限り[CSSの背景色が表示されません：hidden？なぜですか？]（http://stackoverflow.com/questions/6479018/css-background-color-not-showing-up-unless-i-add-overflowhidden-why） – Varin

次のdivで

画像を浮かべています。最初のdivのプロパティはoverflow:hidden;です。その結果、最初のdivはコンテンツのサイズを調整することで容易になりますが、2番目のdivは縮小されたままです。 floatプロパティは、ドキュメントフローから要素を取り除く方法を持っていますが、overflow:hidden;はそれを復元します。直感的ではないようです。

#div1, #div2 { 
 
    border: 2px solid green; 
 
    margin-bottom:5px; 
 
    
 
    } 
 

 
img { 
 
    float:left; 
 
    } 
 

 
#div1 { 
 
    overflow:hidden; 
 
    }

<div id="div1"> 
 
<img src="http://placehold.it/200x100"></div> 
 
<div id="div2"> 
 
<img src="http://placehold.it/200x100"></div>

出典

2016-10-08 16:05:19 Daniel

オーバーフローが発生しても機能しないのはなぜですか？

答えて

関連する問題