Was ist der Zweck von „clear:both' in CSS?

Die Rolle von „clear:both“ in CSS verstehen

Wenn eine Webseite Elemente enthält, die nach links oder rechts schweben, ist dies möglich Dadurch werden sie von nachfolgenden Elementen umströmt. Um dies zu verhindern, stellt CSS die Eigenschaft „clear“ bereit, die auf eine bestimmte Seite (links, rechts) oder auf „both“ gesetzt werden kann.

Was ist der Nutzen von „clear:both“? ?

„clear:both“ weist das Element an, unter alle vorhergehenden Elemente zu fallen, die nach links und rechts verschoben wurden. Dadurch kann es in einer neuen Zeile beginnen und alle Ränder oder Abstände entfernen, die sich andernfalls um die schwebenden Elemente wickeln könnten.

Wie funktioniert „clear:both“?

In einem normalen Dokumentenfluss werden Elemente vertikal gestapelt und der Inhalt fließt um sie herum. Wenn ein Element jedoch schwebend ist, verschiebt es sich entweder nach links oder rechts, sodass andere Inhalte darunter fließen können. „clear:both“ weist das aktuelle Element an, unterhalb aller zuvor schwebenden Elemente auf beiden Seiten zu beginnen.

Beispielverwendung

Bedenken Sie den folgenden HTML-Code:

<div>

In diesem Beispiel wird das Div „Left Float“ nach links verschoben, wodurch der Text „This is a Paragraph“ umbrochen wird. Das Div „Beide löschen“ wird dann verwendet, um sowohl die linke als auch die rechte Seite zu löschen, sodass der Text „Dies ist ein neuer Absatz“ darunter in einer neuen Zeile angezeigt wird.

Schlussfolgerung

Indem Sie „clear:both“ für ein Element festlegen, können Sie sicherstellen, dass es in einer neuen Zeile unter allen zuvor schwebenden Elementen beginnt, wodurch ein konsistentes und kontrolliertes Layout gewährleistet wird.

Das obige ist der detaillierte Inhalt vonWas ist der Zweck von „clear:both' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!