Welche Rolle spielt Clear in CSS?

Das Attribut „clear“ in CSS wird verwendet, um die Auswirkungen schwebender Elemente auf nachfolgende Elemente zu löschen und sicherzustellen, dass nachfolgende Elemente normal angeordnet sind. Das Attribut „clear“ hat 4 Werte: none: Floats nicht löschen. Left: Floats links löschen. Right: Floats rechts löschen. Beide: Floats links und rechts löschen. Das Clear-Attribut wird verwendet, um die Auswirkungen schwebender Elemente auf nachfolgende Elemente zu löschen. Schwebende Elemente wirken sich auf die Position ihrer nachfolgenden Elemente aus und führen dazu, dass nachfolgende Elemente nicht normal angeordnet werden.

Floats löschen

Das Attribut „clear“ hat die folgenden Werte:

none:

Löscht keine Floats.

links:

Löschen Sie die schwebenden Elemente auf der linken Seite.

rechts:
• Löschen Sie die schwebenden Elemente auf der rechten Seite.
beides:
• Schwebende Elemente auf der linken und rechten Seite löschen.
• Verwendungsszenarien
Wenn nachfolgende Elemente normal unter dem schwebenden Element angeordnet werden sollen, können Sie das Attribut „clear“ verwenden. Zum Beispiel:

• <code class="css">.container {
    width: 100%;
  }
  
  .float-left {
    float: left;
    width: 50%;
  }
  
  .clear {
    clear: both;
  }</code>

  In diesem Beispiel schwebt das .float-left-Element auf der linken Seite, und das .clear-Element löscht den Einfluss des schwebenden Elements durch clear: Both, sodass nachfolgende Elemente normal angeordnet werden können.

Beispiel

Das folgende Bild ist ein Beispiel für die Verwendung des Attributs „clear“:

[Das Bild zeigt zwei Elemente, das linke Element ist schwebend, das rechte Element verwendet „clear: Both“]

Das rechte Element verwendet „clear“. : beide

[Das Bild zeigt, dass die schwebenden Elemente gelöscht sind und die Elemente auf der rechten Seite normal angeordnet sind]

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