Wie wirkt sich „overflow:hidden' auf schwebende Elemente innerhalb eines „' und der nachfolgenden Textplatzierung aus?

CSS overflow:hidden with Floats Explained

Frage: Wie wirkt sich die Overflow-Eigenschaft auf die relative Platzierung von Text aus? zu einer UL mit Floated Elemente?

Erklärung:

Standardmäßig werden Elemente auf Blockebene wie ul und p auf 100 % der übergeordneten Breite gedehnt. Im gegebenen Beispiel enthält die ul nur schwebende li-Elemente, wodurch sie auf eine Höhe von 0 Pixel zusammenfällt, während ihre volle Breite erhalten bleibt.

Infolgedessen erscheint das angrenzende p-Element rechts vom schwebenden Element li-Elemente und behandelt sie als normale Floats.

Wenn overflow:hidden jedoch auf ul angewendet wird, wird ein neuer Blockformatierungskontext (BFC) erstellt, der effektiv die li-Elemente enthält innerhalb der ul. Dadurch wird verhindert, dass ul zusammenbricht, und das p-Element wird nach unten gedrückt, wodurch die schwebenden li-Elemente gelöscht werden.

Technische Details:

Gemäß der CSS-Spezifikation Wenn ein Überlauf für nicht ersetzte Elemente auf Blockebene im normalen Fluss sichtbar ist, verhalten sie sich wie Standardblockelemente. Wenn Sie den Überlauf jedoch auf einen beliebigen nicht sichtbaren Wert (einschließlich versteckt) setzen, wird ein BFC erstellt, der zu einem anderen Verhalten führt.

Beispiel:

Bedenken Sie den folgenden Code:

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

Ohne Überlauf:

<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>

Mit Überlauf:

<ul>

Wie Sie sehen können, zwingt die Anwendung von overflow:hidden auf den ul die schwebenden Li-Elemente dazu wird im ul enthalten sein und das p-Element löschen, wodurch es an das Ende der Seite verschoben wird.

Das obige ist der detaillierte Inhalt vonWie wirkt sich „overflow:hidden' auf schwebende Elemente innerhalb eines „' und der nachfolgenden Textplatzierung aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!