Welche Funktion hat Clear in CSS?

CSS-Clear-Attribut (clear) wird verwendet, um die Beziehung zwischen Elementen und schwebenden Elementen zu steuern, um sicherzustellen, dass nicht schwebende Elemente nicht unter schwebenden Elementen fließen. Die Verwendung ist wie folgt: Keine: Floats links nicht löschen: Linke Floats löschen rechts: Rechte Floats löschen Beide: Linke und rechte Floats löschen

Die Rolle des Attributs „clear“ in CSS

Das Attribut „clear“ ist Wird verwendet, um den Float eines Elements zu steuern. Die Beziehung zwischen Elementen stellt sicher, dass nicht schwebende Elemente nicht unter schwebenden Elementen fließen.

Verwendung

<code class="css">clear: none | left | right | both;</code>

• none: Standardwert, Float nicht löschen.
• links: Löschen Sie die schwebenden Elemente auf der linken Seite.
• rechts: Entfernen Sie die schwebenden Elemente auf der rechten Seite.
• beides: Entfernen Sie die schwebenden Elemente auf der linken und rechten Seite.

Funktion

Wenn Elemente schwebend sind, werden sie außerhalb des Dokumentflusses platziert, und nachfolgende nicht schwebende Elemente fließen unterhalb der schwebenden Elemente. Das Attribut „clear“ legt den Clear-Wert eines nicht schwebenden Elements fest, um zu erzwingen, dass es oberhalb des schwebenden Elements beginnt.

Zum Beispiel stellt der folgende Code sicher, dass das Absatzelement nicht unter das schwebende Bild fließt:

<code class="css">p {
  clear: both;
}</code>

Beispiel

Nehmen Sie den folgenden HTML-Code an:

<code class="html"><div class="container">
  <div class="image float-left"></div>
  <p>段落</p>
</div></code>

Wenn das Attribut „clear“ nicht festgelegt ist, wird das Absatzelement verwendet fließt unterhalb des darunter liegenden Bildelements, was zu einem verwirrenden Layout führt.

Indem Sie das Attribut „clear“ festlegen, können Sie sicherstellen, dass das Absatzelement über dem Bildelement beginnt:

<code class="css">.container {
  width: 500px;
}

.image {
  float: left;
  width: 200px;
  height: 200px;
  background: #f00;
}

p {
  clear: both;
}</code>

In diesem Beispiel wird das Absatzelement gezwungen, über dem Bildelement zu beginnen, wodurch das Layout klar und deutlich wird.

Das obige ist der detaillierte Inhalt vonWelche Funktion hat Clear in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!