CSS-Float klar

CSS float clear

CSS float clear ist eines der Probleme, die beim CSS-Schreiben häufig auftreten. Während des Layoutprozesses kann das adaptive Layout der Elemente auf der Seite durch die Verwendung des Floating-Attributs erreicht werden. Allerdings können sich Floating-Elemente leicht auf das Layout der Webseite auswirken und dazu führen, dass die gesamte Seite ungeordnet angezeigt wird , müssen die schwebenden Elemente gelöscht werden.

In diesem Artikel wird die Methode des CSS-Float-Clearings ausführlich vorgestellt, um den Lesern dabei zu helfen, die Auswirkungen des Floatings auf das Webseitenlayout zu lösen.

1. Das Grundkonzept von Float

Beim CSS-Layout ist Float ein häufig verwendetes Attribut. Verwenden Sie das Float-Attribut, um Elemente nach links oder rechts zu verschieben und so ein adaptives Webseitenlayout zu ermöglichen. Der folgende Code kann beispielsweise dafür sorgen, dass ein Bild nach links schwebt: Implementieren Sie ein adaptives Layout von Seitenelementen, aber die Auswirkungen schwebender Elemente können nicht ignoriert werden.

Floating-Elemente führen dazu, dass die Höhe ihrer übergeordneten Elemente verloren geht, und wirken sich auf das Layout nachfolgender Elemente aus. Wenn ein übergeordnetes Element beispielsweise mehrere schwebende Elemente enthält, wird seine Höhe gelöscht, was dazu führt, dass die folgenden Elemente nicht korrekt angeordnet werden. Zu diesem Zeitpunkt müssen Sie den Schwimmer reinigen, um dieses Problem zu lösen.

So löschen Sie Floats

Es gibt viele Möglichkeiten, Floats zu löschen.

3.1 Fügen Sie dem übergeordneten Element das Attribut „clear“ hinzu.
3. Wenn das übergeordnete Element ein schwebendes Element enthält, können Sie das schwebende Element löschen, indem Sie dem übergeordneten Element das Attribut „clear“ hinzufügen. Der folgende Code kann beispielsweise dafür sorgen, dass das übergeordnete Element #container schwebende Elemente enthält, wodurch das Seitenlayout korrekt angezeigt wird:

img {
    float: left;
}

Der obige Code fügt das Überlaufattribut zum übergeordneten Element hinzu und setzt es auf ausgeblendet. damit Clear schwimmt.

3.2 Leere Elemente zum Löschen von Floats verwenden

Die Verwendung leerer Elemente zum Löschen von Floats ist eine sehr verbreitete Methode. Fügen Sie am Ende des übergeordneten Elements ein leeres div-Element hinzu und setzen Sie das Attribut „clear“ darauf, um den Float zu löschen.

Zum Beispiel kann der folgende Code dafür sorgen, dass das übergeordnete Element #container den Float löscht:

#container {
    overflow: hidden;
}

Im obigen Code fügen wir dem übergeordneten Element ein leeres div-Element hinzu # Container und fügte die Klasse .clear hinzu, damit Floats gelöscht werden können.

3.3 Pseudoelemente zum Löschen von Floats verwenden

Sie können Pseudoelemente auch zum Löschen von Floats verwenden, was eleganter ist. Fügen Sie dem übergeordneten Element ein Pseudoelement hinzu und fügen Sie ihm dann das Attribut „clear“ hinzu.

Zum Beispiel kann der folgende Code dafür sorgen, dass das übergeordnete Element #container den Float löscht:

.clear { clear: both; }
<div id="container">
    <div class="float-left"></div>
    <div class="float-right"></div>
    <div class="clear"></div>
</div>

Summary

#🎜🎜 #Dieser Artikel Der Artikel stellt die Grundkonzepte der CSS-Float-Freigabe, die Auswirkungen von Floats und verschiedene Möglichkeiten zum Löschen von Floats vor. Beim Layouten von Webseiten können wir durch rationale Auswahl und flexible Verwendung dieser Methoden die Auswirkungen des Floatings auf das Layout besser bewältigen und so ein schöneres und flexibleres Seitenlayout erzielen.

Das obige ist der detaillierte Inhalt vonCSS-Float klar. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!