Welche Möglichkeiten gibt es, Floats in CSS zu löschen?

CSS-Möglichkeiten zum Löschen von Floats umfassen die Verwendung des Clear-Attributs, des Overflow-Attributs, der Clearfix-Klasse, der Clearfix-Klasse des übergeordneten Elements, eines Pseudoelements zum Löschen von Float, des Overflow-Attributs des übergeordneten Elements und des Clear-Attributs in Kombination mit BFC usw. Detaillierte Einführung: 1. Verwenden Sie das Clear-Attribut, eine einfache und häufig verwendete Methode zum Löschen von Floats, indem Sie nach dem Floating-Element ein leeres Element auf Blockebene hinzufügen und das Clear-Attribut dafür festlegen, können Sie den vorherigen Floating-Effekt löschen und herstellen Die folgenden Elemente sind normal angeordnet und so weiter.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

In CSS ist Float eine gängige Layouttechnik, die es einem Element ermöglicht, aus dem normalen Dokumentfluss auszubrechen und entlang der linken oder rechten Seite seines Containers zu schweben. Wenn schwebende Elemente jedoch unterschiedliche Höhen haben oder sich schwebende Elemente überlappen, kann dies zu Verwirrung im Layout oder unerwarteten Nebenwirkungen führen. Um diese Probleme zu lösen, können wir Floats auf unterschiedliche Weise löschen. Im Folgenden werde ich einige häufig verwendete CSS-Methoden zum Löschen von Floats vorstellen.

1. Verwenden Sie das Attribut „clear“:

Das Attribut „clear“ ist eine einfache und häufig verwendete Methode zum Löschen von Floats. Durch Hinzufügen eines leeren Elements auf Blockebene nach einem schwebenden Element und Festlegen des Attributs „clear“ kann die Wirkung des vorherigen schwebenden Elements gelöscht und die darunter liegenden Elemente normal angeordnet werden. Das Attribut „clear“ kann auf „links“, „rechts“, „beide“ oder „keine“ gesetzt werden, was bedeutet, dass linke Floats, rechte Floats, linke und rechte Floats gleichzeitig gelöscht werden bzw. Floats nicht gelöscht werden.

Beispielcode:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }

Beispiel-HTML-Code:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

2 Verwenden Sie das Überlaufattribut:

Das Überlaufattribut ist eine weitere häufig verwendete Methode zum Löschen von Floats. Indem Sie das Überlaufattribut im Container eines schwebenden Elements auf „Auto“ oder „Ausgeblendet“ setzen, können Sie den BFC (Formatierungskontext auf Blockebene) auslösen und so den Effekt des Schwebens beseitigen. Dies liegt daran, dass BFC schwebende Elemente einbezieht und deren Höhe berechnet, damit der Container normal ausgelegt werden kann.

Beispielcode:

   .clearfix {
     overflow: hidden;
   }

Beispiel-HTML-Code:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

3. Clearfix-Klasse verwenden:

Die Clearfix-Klasse ist ein häufig verwendeter Klassenname zum Löschen von Floats. Sie kann durch Hinzufügen der Clearfix-Klasse zum Floating-Container gelöscht werden Elemente. Schwebende Effekte. Diese Methode verwendet normalerweise die Pseudoklasse::after, um ein leeres Element auf Blockebene hinzuzufügen und das Attribut „clear“ dafür festzulegen.

Beispielcode:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }
   .clearfix {
     zoom: 1;
   }

Beispiel-HTML-Code:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

4. Verwenden Sie die Clearfix-Klasse des übergeordneten Elements:

In einigen Fällen können wir die Clearfix-Klasse direkt zum übergeordneten Element des Floating-Elements hinzufügen, um das zu löschen schwebender Effekt. Diese Methode ähnelt der oben genannten Clearfix-Klassenmethode, aber durch Hinzufügen der Clearfix-Klasse zum übergeordneten Element kann der Floating-Effekt aller untergeordneten Elemente bequemer gelöscht werden.

Beispielcode:

   .parent-element::after {
     content: "";
     display: block;
     clear: both;
   }

Beispiel-HTML-Code:

   <div class="parent-element clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

5. Verwenden Sie Pseudo-Element, um Floats zu löschen:

Zusätzlich zur Verwendung von Pseudo-class::after können wir auch Pseudo-element::before zum Löschen verwenden schwimmt. Durch Hinzufügen eines leeren Elements auf Blockebene zum Container des Floating-Elements und Festlegen seines Inhaltsattributs auf eine leere Zeichenfolge kann BFC ausgelöst werden, um den Floating-Effekt zu löschen.

Beispielcode:

   .clearfix::before,
   .clearfix::after {
     content: "";
     display: table;
   }
   .clearfix::after {
     clear: both;
   }
   .clearfix {
     zoom: 1;
   }

Beispiel-HTML-Code:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

6. Verwenden Sie das Überlaufattribut des übergeordneten Elements:

Zusätzlich zum Festlegen des Überlaufattributs für den Container des schwebenden Elements können wir auch das Überlaufattribut festlegen auf seinem übergeordneten Element, um schwebende Effekte zu löschen. Diese Methode ähnelt der oben erwähnten Überlaufattributmethode, aber das Festlegen des Überlaufattributs für das übergeordnete Element erleichtert das Entfernen des Floating-Effekts aller untergeordneten Elemente.

Beispielcode:

   .parent-element {
     overflow: hidden;
   }

Beispiel-HTML-Code:

   <div class="parent-element">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

7 Verwendung des Clear-Attributs und BFC:

In einigen Fällen können wir den Float löschen, indem wir das Clear-Attribut mit BFC kombinieren. Indem Sie nach dem Floating-Element ein leeres Element auf Blockebene hinzufügen, das Clear-Attribut dafür festlegen und dann das Overflow-Attribut des Containers des Floating-Elements auf „Auto“ oder „Hidden“ setzen, können Sie diese beiden Methoden gleichzeitig zum Löschen verwenden der schwebende Effekt.

Beispielcode:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }
   .clearfix {
     overflow: hidden;
   }

Beispiel-HTML-Code:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

Zusammenfassend lässt sich sagen, dass CSS-Methoden zum Löschen von Floats die Verwendung von Clear-Attributen, Überlaufattributen, Clearfix-Klassen, Clearfix-Klassen von übergeordneten Elementen, Pseudoelementen zum Löschen von Floats und übergeordneten Elementen umfassen . Methoden wie Überlaufattribut und Clear-Attribut kombiniert mit BFC. In der tatsächlichen Entwicklung können wir basierend auf spezifischen Anforderungen und Layoutbedingungen eine geeignete Methode zum Löschen von Floats auswählen, um sicherzustellen, dass das Layout der Seite korrekt ist und den Erwartungen entspricht.

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Floats in CSS zu löschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!