なぜoverflow：hiddenを使用するのですか？

Question

なぜこれらの3つのプロパティをこのメニューで使用しますか？私はなぜこれらの3つの特性が必要なのか分かりません。私は本当にこれの技術的側面を知りたいですか？

margin: 0; 
padding: 0; 
overflow: hidden; 

HTML：

<ul> 
    <li><a class="active" 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> 

はCSS：オーバーフローのために

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

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

Answer 1

パディングとマージンのデフォルト値は0（ブラウザによって異なる）です。だから私はあなたがそれらを削除する場合、何か違いがあるとは思わない。

オーバーフロー：hiddenは、div内のテキストを非表示にするプロパティです。つまり、画面には表示されず、クリップされます。

オーバーフロー：autoは、テキストがdivから外れるとスクロールバーを表示します。

があり、より多くのオプションで利用可能な詳細については、以下のリンクからご覧ください::

link

Answer 2

：隠された部分、私は最良の答えは、W3Schoolsのから、この例だと思う：overflow hidden example何が起こることは、すべてがそれであります許可されたスペースに収まらない場合は、クリップされ、決して表示されません。

this questionのmarginoverとpaddingの違いについては、stackoverflowで説明します。

Answer 3

ul要素はデフォルトあなたがブラウザによって40ピクセルのmargin/paddingを持っています。だから、ulにこれらのプロパティを置く：

ul { 
    margin: 0; 
    padding: 0; 
} 

は、ブラウザ上でのデフォルトの動作を上書きします。その上で、ここでのドキュメントを参照してください： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation#Finding_Consistency

その後、overflow:hiddenプロパティが原因ul要素内の浮遊li要素の使用です。

visibleと異なる値（その の既定値）でoverflowプロパティを使用すると、新しいブロック書式設定コンテキストが作成されます。これは技術的には です。浮動小数点がスクロールする 要素と交差すると、強制的に内容を再ラップします。各スクロール・ステップの後にリワープが になると、スクロール・スクロールが遅くなります。

出典：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 4

注overflow: hiddenそれはまたあなたの要素でフロートをクリアするために使用されます。少なくとも私はそれをする:)

ul { 
    overflow: hidden; 
} 

li { 
    float: left; 
} 

https://jsfiddle.net/jff5pnx7/