ulタグには何が行われますか：hidden do？

Question

私はこの記事からの指示を使用して複数の列リストを作成しています：

HTML：：

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

一言で言えば、それはこの線に沿って何かを言います

<div class='block'> 
    <ul> 
    <li> 
     Item1 
    </li> 
    <li> 
     Item2 
    </li> 
    <li> 
     Item3 
    </li> 
    </ul> 
</div> 

CSS：

.block { 
    border: 1px solid black; 
    padding: 10px; 
} 
.block ul { 
    width: 100%; 
    overflow: hidden; 
} 
.block ul li { 
    display: inline; 
    float: left; 
    width: 50%; 
} 

それはすばらしく働いていますが、私はオーバーフロー：隠されたCSS宣言で心配しました。それがなければ

は、私の外側のdivがそうのような崩壊：

http://jsfiddle.net/alininja/KQ9Nm/2/

：

それは含まれています

http://jsfiddle.net/alininja/KQ9Nm/1/

は、外側のdivは、私はそれになりたいだろうかと正確に動作します私はなぜオーバーフロー：隠されているこの動作を引き起こしているのだろうかと思います。外側のdivを必要な高さに拡大する代わりに内側のliアイテムをカットすることが期待されます。

ありがとうございます！

Answer 1

オーバーフローが隠し、スクロールまたは自動のいずれかに設定されていない限り、浮動している可能性のあるものは切り取られません。このメソッドの真の魔法は、要素に設定された高さを与えずに、オーバーフローを隠しに設定すると内側の要素の高さになります。

ここで、imgはフローティングであるため、divはimgを囲んでいません。

<div><img style="float:left;height:100px" /></div> 

ここで、divは、適切なオーバーフローを持つimgの高さを実際に実現します。

<div style="overflow:hidden"><img style="float:left;height:100px" /></div> 

あなたがそれを設定した高さを与えることだったし、その後セットオーバーフローが隠されている場合、それはそれ以外の外側にオーバーフローしていた何かを切るだろう。

<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div> 

例多くにこれらの技術はclear:bothタイプの余分なマークアップを回避するために使用することができることに注意してください。

Answer 2

overflow: hidden;には、flooded liが含まれています。 overflow: hidden;は、新しいブロック書式設定コンテキストを作成します。これは、独自のブロック書式設定コンテキストを持つ要素で、浮動小数点数を含みます。オーバーフローでAdding CSS border changes positioning in HTML5 webpage

Answer 3

：

私はこのもう少し説明してここにStackOverflow上の別の答えを指します隠された、内容は運転しない/ ULの寸法を押してください。 ULの寸法は、内容が内部に収まるかどうかを無視して無視します。

オーバーフローなし：コンテンツとその動作が隠されていても、ULの全体的な大きさを左右する場合があります。これは主に、ULがその内容によって境界が設定/影響を受けるコンテナのほうが多いためです。オーバーフローが隠されていると、ULはコンテナではなくオーバーライドディメンションを持つビューポートとして機能します。