CSS-Überlauf: Versteckt mit Schwimmern

Question

Ich lese die following code on w3schools und verstehe nicht, wie die overflow Eigenschaft würde auswirken, ob Text rechts neben der ul oder nicht angezeigt wird.

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 60px; 
 
    background-color: #dddddd; 
 
    padding: 8px; 
 
}

<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> 
 
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

Ich weiß, dass overflow:hidden Inhalt zu handhaben verwendet wird, die außerhalb der Box geht aber nicht verstehen, wie es in diesem Fall gilt.

Answer 1

Ich versuche, die Verwirrung zu beenden:

ul ist ein Element auf Blockebene, wie auch das Element (sie erstrecken sich auf 100% der Elternbreite). Deshalb erscheint die p standardmäßig unter der ul, wenn für diese Elemente keine Breite oder Anzeige deklariert ist.

Jetzt in Ihrem Beispiel enthält die ul nur floated Elemente. Dadurch fällt es auf eine Höhe von 0px (Es hat immer noch 100% Breite, wie Sie in dem Beispiel sehen können). Die angrenzenden werden rechts neben den schwebenden li s angezeigt, da sie als normal floated Elemente betrachtet werden.

Jetzt overflow (jeder Wert außer visible) erklärt, wird eine neue block formatting context, die die ul enthält seine Kinder macht. Plötzlich erscheint die ul "wieder", nicht mehr Größe 0px. Die wird nach unten geschoben. Sie könnten auch position:absolute deklarieren, um den gleichen "Klärungseffekt" zu erzielen (mit dem Nebeneffekt, dass jetzt der ul aus dem normalen Elementfluss genommen wird - die s werden vom ul überlappt.

)

See the example fiddle

Wenn Sie in die technischen Sachen sind, zu vergleichen, die nach den Absätzen der CSS-Spezifikation:

§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
und
§10.6.7 'Auto' heights for block formatting context roots. (Danke an BoltClock für das Ausgraben der Links).

ul{ 
 
    list-style-type:none; 
 
    margin:0; padding:0; 
 
    background-color:#dddddd; 
 
    border:2px solid red; 
 
} 
 
li{ 
 
    float:left; 
 
} 
 
a{ 
 
    display:block; 
 
    width:60px; 
 
    background-color:#555; 
 
    color:white; 
 
} 
 
p{ 
 
    margin:0; 
 
    outline:2px dotted blue; 
 
} 
 
#two{ 
 
    clear:both; 
 
    overflow:hidden; 
 
}

No overflow: 
 
<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> 
 
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats </p> 
 
<br> 
 
With overflow: hidden 
 
<ul id="two"> 
 
<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> 
 
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>

Answer 2

Anstelle der overflow:hidden;clear:both; für die <p> verwenden. hier wird es verwendet http://jsfiddle.net/Mvv8w/. Grundsätzlich wird overflow:hidden alles löschen, was beiseite ist, genauso wie clear:both; tut.

Answer 3

Die Einstellung overflow: hidden für ein Element bewirkt, dass ein neuer Float-Kontext erstellt wird. Daher werden Elemente, die innerhalb eines Elements mit dem Wert overflow: hidden liegen, gelöscht.

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 4

Aus diesem Grund w3schools für Web-Designer/Entwickler keine zuverlässige Quelle ist. Du hast recht, es ist ein schreckliches Beispiel.

Dies liegt nicht daran, dass das übergeordnete Element in diesem Beispiel kein fixed mit hat. Darüber hinaus ist es ein unbestelltes Listen-Tag, das sich unabhängig von der Größe seiner Kinder ausdehnt.

http://jsfiddle.net/EhphH/

CSS

.parent { 
    width: 150px; 
    height: 100px; 
    padding: 10px; 
    background: yellow; 
    overflow: hidden; 

} 
.child { 
    float: left; 
    width: 75px; 
    height: 120px; 
    margin: 10px; 
    background: blue; 

} 
.baby { 
    width: 200px; 
    height: 25px; 
    background: green; 
} 

Markup

<div class="parent"> 
    <div class="child"> 
     <div class="baby"> 
     </div> 
    </div> 
    <div class="child"> 
    </div> 
</div>