Eine ausführliche Einführung in eine der nützlichsten Methoden zum Löschen von Floats in CSS (mit Code)

Der Inhalt dieses Artikels besteht darin, Ihnen eine detaillierte Einführung (mit Code) über eine der besten Möglichkeiten zum Löschen von Floats in CSS zu geben. Ich hoffe, dass dies der Fall ist hilfreich sein.

Wenn wir Webseiten schreiben, machen wir uns oft Sorgen über die Auswirkungen des Floatings. Da die schwebenden untergeordneten Elemente dazu führen, dass das übergeordnete Element niedrig ist, ist die Webseite durcheinander und kann das nicht erreichen Ergebnisse, die wir wollen.
Floats löschen, diese Methode kann ich nur empfehlen!
Die folgende Methode wird verwendet, seit ich Frontend gelernt habe, und ich habe sie nie geändert, weil sie so einfach zu verwenden ist:

.clearfix:after{    
content: "";    
height:0;    
line-height: 0;    
display:block;    
visibility: hidden;    
clear:both;}

Spezifische Verwendung:

<ul class="clearfix">
    <li style="float:left;"></li>
    <li style="float:left;"></li>
    <li style="float:left;"></li>
    <li style="float:left;"></li></ul>

Unterelement Wenn es schwimmt, fügen Sie diese Klasse einfach zum übergeordneten Element hinzu. Es wird funktionieren, egal wie sehr Sie es versuchen!

Da dieser Stil häufig verwendet wird, wird empfohlen, ihn dem öffentlichen Stil hinzuzufügen!

Verwandte Empfehlungen:

Html und CSS kombiniert, um Code für die Anpassung mobiler Webseiten zu realisieren

Zugriff auf den Dienst in der HTML-Endmethode Analyse (Bilder und Text)

Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in eine der nützlichsten Methoden zum Löschen von Floats in CSS (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!