So löschen Sie Float in CSS3

CSS3 Clear Floats

Während der Webentwicklung sind Floats eine sehr häufige CSS-Eigenschaft, die für das Layout verwendet wird. Durch das Schweben können Elemente dem Fluss des Dokuments entkommen und nach Bedarf frei auf der Seite platziert werden. Das Schweben hat jedoch auch ein Problem: Es kann dazu führen, dass sich Elemente überlappen oder die Höhe des übergeordneten Elements zusammenbricht. Um dieses Problem zu lösen, müssen wir einige Tricks anwenden, um die Floats zu löschen.

1. Was ist Float? In CSS bedeutet Float eine Methode zum Positionieren von Elementen. Wenn für ein Element das Float-Attribut festgelegt ist, bricht es aus dem Dokumentfluss aus und bewegt sich nach links oder rechts, bis seine Außenkante die Kante seines enthaltenden Elements oder die Kante eines anderen Float-Elements berührt.

2. Probleme mit Floating

Obwohl Floating die freie Platzierung von Elementen ermöglicht, kann es auch einige Probleme verursachen. Beispielsweise führen schwebende Elemente dazu, dass die Höhe des übergeordneten Elements sinkt. Dieses Problem kann durch Festlegen des Überlaufattributs auf das übergeordnete Element gelöst werden. Gleichzeitig führt das Floating auch dazu, dass sich Elemente überlappen. Dieses Problem kann durch die Verwendung des Attributs „clear“ gelöst werden.

3. Methoden zum Löschen von Floats

1. Verwenden Sie das Clear-Attribut. In CSS wird das Clear-Attribut zum Löschen von Float-Attributen verwendet. Es hat vier Werte, nämlich links, rechts, beide und keine. Unter diesen bedeutet „links“ das Löschen der linken Floats, „rechts“ das Löschen der rechten Floats, „beide“ bedeutet das Löschen der linken und rechten Floats und „Keine“ bedeutet, dass keine Floats gelöscht werden.

Zum Beispiel:

.clearfix { clear: both; }

In diesem Beispiel verwenden wir eine Clearfix-Klasse, um Floats zu löschen. In HTML können wir diese Klasse zu den Elementen hinzufügen, die Floats löschen müssen:

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-right"></div>
</div>

2. Leere Elemente verwenden

Zusätzlich zum Attribut „clear“ können wir auch ein leeres Element verwenden, um Floats zu löschen.

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-right"></div>
  <div style="clear:both;"></div>
</div>

In diesem Beispiel verwenden wir ein leeres Element, um das Float-Element zu löschen. Dieses Element erscheint nicht auf der Seite, nimmt jedoch Platz unter dem Float-Element ein und verhindert so eine Überlappung und einen Höheneinbruch des übergeordneten Elements.

3. Verwenden Sie das Box-Modell

In CSS3 können wir das Box-Sizing-Attribut verwenden, um Floating zu löschen. box-sizing hat zwei Werte, nämlich content-box und border-box. Unter diesen bedeutet Content-Box, dass die Breite und Höhe des Elements nur die Breite und Höhe des Inhalts einschließt, während Border-Box bedeutet, dass die Breite und Höhe des Elements die Breite und Höhe des Inhalts sowie die Breite von enthält die Grenze.

Beispiel:

.clearfix {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ccc;
}

In diesem Beispiel haben wir Box-Sizing verwendet, um Floats zu löschen. Da die Rahmenbox festgelegt ist, ändern Auffüllung und Rand die Größe des Elements nicht, wodurch die Probleme überlappender schwebender Elemente und der Höhenverringerung übergeordneter Elemente vermieden werden.

4. Zusammenfassung

Durch die obige Einführung verstehen wir, was Floating ist und welche Probleme es verursacht. Gleichzeitig haben wir auch drei Methoden zum Löschen von Floats gelernt, nämlich die Verwendung des Clear-Attributs, die Verwendung leerer Elemente und die Verwendung des Box-Modells. In tatsächlichen Projekten können wir entsprechend der tatsächlichen Situation die geeignete Float-Clearing-Methode auswählen.

Das obige ist der detaillierte Inhalt vonSo löschen Sie Float in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!