Was bedeutet Überlauf: versteckt für ul-Tag?

Question

Ich bin eine mehrspaltige Liste mit den Anweisungen aus diesem Artikel zu erstellen:

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

Auf den Punkt gebracht, heißt es etwas entlang der Linien von, dies zu tun:

HTML:

<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%; 
} 

Und es funktioniert wunderbar, aber ich war verblüfft bei der Überlauf: versteckte CSS-Erklärung.

Ohne sie meine äußere div kollabiert wie so:

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

Wenn es enthalten ist, die äußere div verhält sich genau so, wie, wie ich es sein möchte:

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

Ich frage mich, warum Überlauf: versteckt ist dieses Verhalten auszulösen. Ich würde erwarten, dass es die inneren li-Elemente abschneidet, anstatt das äußere div zu zwingen, sich auf die notwendige Höhe auszudehnen.

Vielen Dank für Ihre Suche!

Answer 1

Alles, was darin schwebt, wird nicht abgeschnitten, es sei denn, Sie haben den Überlauf auf Versteckt, Bildlauf oder Automatisch gesetzt. Die wahre Magie der Methode besteht darin, dass, wenn Sie dem Element eine festgelegte Höhe zuweisen, wenn Sie den Überlauf auf "Versteckt" setzen, die Höhe der inneren Elemente annimmt.

Hier würde das div nicht um das img wickeln, weil das img schwimmt.

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

Hier wird das div wird die Höhe des img jetzt dass es einen richtigen Überlauf verwirklichen.

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

Wenn du bist ihm eine festgelegte Höhe geben, und dann würde es Überlauf versteckt gesetzt etwas hackt, die sonst überschwemmt haben nach außen würden.

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

Beachten Sie, dass diese Techniken in vielen Fällen verwendet werden kann clear:both Typ zusätzliche Markup zu vermeiden.

Answer 2

Die overflow: hidden; ist da, um die floated li s zu enthalten. overflow: hidden; erstellt einen neuen Blockformatierungskontext - und das sind Elemente mit eigenen Blockformatierungskontexten - sie enthalten Gleitkommazahlen.

ich zu einer anderen Antwort hier auf Stackoverflow zeigen würde, dass dies ein wenig mehr erklärt: Adding CSS border changes positioning in HTML5 webpage

Answer 3

mit Überlauf: versteckt, wird der Inhalt nicht fahren/drücken Sie die Abmessungen des UL. Die UL-Dimensionen überschreiben und ignorieren, ob der Inhalt in den Inhalt passt oder nicht.

Ohne Überlauf: versteckt den Inhalt und ihr Verhalten kann oder kann nicht die Gesamtabmessungen der UL fahren. Dies liegt hauptsächlich daran, dass der UL eher ein Container ist, dessen Grenzen durch seinen Inhalt festgelegt/beeinflusst werden. Wenn der Überlauf versteckt ist, fungiert der UL mehr als ein Sichtfenster mit überragenden Dimensionen, nicht so sehr als Container.