it-swarm.com.de

CSS-Überlauf: Mit Schwimmern versteckt

Ich lese den folgenden Code in w3schools und verstehe nicht, wie die overflow -Eigenschaft beeinflussen würde, ob Text rechts von ul erscheint oder nicht. 

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 verwendet wird, um Inhalte zu behandeln, die außerhalb der Box gehen, aber nicht verstehen, wie sie in diesem Fall angewendet werden.

15
Robert Rocha

Ich versuche die Verwirrung zu beenden:

ulist ein Element auf Blockebene, ebenso wie das pname__-Element (sie erstrecken sich auf 100% der übergeordneten Breite). Aus diesem Grund wird pstandardmäßig unter dem ulangezeigt, wenn für diese Elemente keine Breite oder Anzeige deklariert ist.

In Ihrem Beispiel enthält der uljetzt nur Floated-Elemente. Dadurch wird es auf eine Höhe von 0px reduziert (es hat jedoch immer noch eine Breite von 100%, wie Sie im Beispiel sehen können). Der angrenzende pwird rechts von den floated liname__s angezeigt, da sie als normale floated-Elemente betrachtet werden.

Durch das Deklarieren von overflow(ein anderer Wert als visiblename__) wird ein neuer Block-Formatierungskontext erstellt, wodurch der ulseine untergeordneten Elemente enthält. Plötzlich erscheint der ul"wieder" mit der Größe 0px nicht mehr. Der pwird nach unten gedrückt. Sie können auch position:absolute deklarieren, um den gleichen "Clearing" -Effekt zu erzielen (mit dem Nebeneffekt, dass nun ulaus dem normalen Elementfluss genommen wird - der pname__s wird von dem ulüberlappt.)

Siehe die Beispielgeige

Wenn Sie sich mit technischen Fragen beschäftigen, vergleichen Sie die entsprechenden Absätze der CSS-Spezifikation:

§10.6.3 Nicht ersetzte Elemente auf Blockebene im normalen Fluss, wenn 'Überlauf' zu 'sichtbar' berechnet wird
und
§10.6.7 'Auto' -Höhen für Kontext-Wurzeln der Blockformatierung . (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>

32
Christoph

Wenn Sie overflow: hidden für ein Element festlegen, wird ein neuer Float-Kontext erstellt, sodass Elemente, die in einem Element verschoben werden, auf das overflow: hidden angewendet wurde, gelöscht werden.

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

10
ryanbrill

Daher ist w3schools keine zuverlässige Quelle für Webdesigner entwickler. Sie haben recht, es ist ein schreckliches Beispiel.

Dies ist jedoch nicht der Fall, da das übergeordnete Element in diesem Beispiel kein festes mit hat. Darüber hinaus handelt es sich um ein ungeordnetes List-Tag, das sich unabhängig von der Größe seiner Kinder erstreckt.

/ - 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>
0
Plummer

Zitat aus HTML & CSS ist schwer

Zusammenfassend lässt sich sagen, dass Sie die klare Lösung verwenden, wenn Sie ein zusätzliches HTML-Element am unteren Rand eines Container-Divs haben. Andernfalls fügen Sie dem Containerelement eine versteckte Überlaufdeklaration hinzu. Die Grundidee für beide Optionen ist, dass Sie dem Browser mitteilen müssen, dass Floats in die Höhe ihres Containerelements einbezogen werden sollen

0
Qiulang