Wie wirkt sich „overflow:hidden' auf schwebende Elemente und nachfolgende Inhalte aus?

CSS overflow:hidden with Floats

Die Auswirkungen der Overflow-Eigenschaft verstehen

Die overflow-Eigenschaft in CSS gibt die Handhabung an von Inhalten, die die Grenzen ihres enthaltenden Elements überschreiten. Wenn es auf ein Element mit schwebenden untergeordneten Elementen angewendet wird, wird ein neuer Blockformatierungskontext erstellt.

Auswirkung auf die Textplatzierung

Beachten Sie den folgenden Codeausschnitt:

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

li {
  float: left;
}

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

Standardmäßig wird ein Absatzelement (p), das nach dem ul erscheint, nach unten verschoben, da ul eine Blockebene ist Element. Wenn jedoch der Überlauf auf der UL auf „Ausgeblendet“ eingestellt ist, geschieht Folgendes:

• Die UL erstellt einen Blockformatierungskontext, der seine untergeordneten Float-Elemente (die LIS) enthält.
• Die ul „erscheint wieder“ und kollabiert nicht mehr auf eine Höhe von 0px.
• Der Absatz (p) wird an das Ende des ul-Inhalts verschoben, erscheint nach den schwebenden Elementen.

Dies liegt daran, dass overflow:hidden eine neue Formatierungsumgebung erstellt, in der sich ul wie ein Element auf Blockebene verhält und seine untergeordneten Elemente enthält.

Technische Erklärung

Laut CSS Spezifikation:

• Wenn der Überlauf „sichtbar“ ist: „Nicht ersetzte Elemente auf Blockebene erstellen keinen neuen Blockformatierungskontext, unabhängig von ihrer Float-Eigenschaft.“ ([§10.6.3](https://www.w3.org/TR/CSS2/visudet.html#block-level))
• Wenn der Überlauf auf „nicht sichtbar“ eingestellt ist ' value: „Ein Blockformatierungskontext wird durch das Stammelement eines beliebigen Unterbaums erstellt, dessen Stammelement der Stamm der untergeordneten Liste eines Inline-Level- oder atomaren Inline-Level-Elements ist Element ist schwebend, absolut positioniert oder hat einen anderen „Überlauf“ als „sichtbar“. ([§10.6.7](https://www.w3.org/TR/CSS21/visudet.html#creasing-block))

Durch die Einstellung overflow:hidden auf der ul wird ein neues erstellt Blockieren Sie den Formatierungskontext, wodurch er seine untergeordneten Elemente enthält und den Absatz nach unten verschiebt.

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