float klares HTML

Bei der Webentwicklung treten häufig Layoutprobleme auf, die durch schwebende Elemente verursacht werden. Schwebende Elemente werden aus dem Dokumentfluss ausbrechen, wodurch die Höhe des übergeordneten Elements zusammenbricht und andere Geschwisterelemente beeinträchtigt werden. Um diese Probleme zu lösen, müssen wir Float Clearing verwenden.

Der Kern des Float-Clearings besteht darin, das übergeordnete Element das Floating-Element enthalten zu lassen und seine eigene Höhe neu zu berechnen. Zu den gängigen Floating-Clearing-Methoden gehören die folgenden.

1. Verwenden Sie leere div-Tags, um Floats zu löschen

Diese Methode ist die früheste und gebräuchlichste Methode zum Löschen von Floats. Fügen Sie am Ende des schwebenden Elements ein leeres div-Tag hinzu und legen Sie dessen Stil auf „clear:both“ fest, um das schwebende Element zu löschen.

.clearfix{
    clear:both;
}

Durch Hinzufügen eines Clearfix-Klassennamens zum übergeordneten Element enthält es das schwebende Element, wodurch das übergeordnete Element die Höhe neu berechnet.

Diese Methode hat jedoch die folgenden Nachteile:

• Es werden bedeutungslose DOM-Elemente hinzugefügt
• Es müssen zusätzliche Stile hinzugefügt werden
• Es kann das ursprüngliche Layout zerstören

Versuchen Sie daher, diese Methode so selten wie möglich zu verwenden. es sei denn, es gibt keine anderen besseren Alternativen.

2. Verwendung von BFC

BFC (Block-Level-Formatierungskontext) ist ein wichtiges Layoutkonzept im Web. BFC kann ein Element in einen unabhängigen Layoutblock mit den folgenden Eigenschaften einschließen:

• Die internen Boxen werden nacheinander in vertikaler Richtung platziert.
• Der vertikale Abstand der Box wird durch den Rand bestimmt. Die Ränder zweier benachbarter Boxen, die zum selben BFC gehören, überlappen sich.
• Der BFC-Bereich überschneidet sich nicht mit der Floatbox.
• BFC ist ein unabhängiger Container auf der Seite und hat keinen Einfluss auf die darin enthaltene Box und umgekehrt.
• Bei der Berechnung der BFC-Höhe werden auch schwebende Elemente in die Berechnung einbezogen.

Durch Festlegen von BFC auf das übergeordnete Element kann der Float des untergeordneten Elements gelöscht werden.

Methode 1:

.container{
    overflow: hidden;
}

Methode 2:

.container{
    display: flow-root;
}

Obwohl diese Methode das Hinzufügen zusätzlicher DOM-Elemente nicht erfordert, erfordert sie ein gewisses Verständnis der Eigenschaften von BFC und der Auswirkungen von BFC auf das Layout.

3. Verwenden Sie Pseudoelemente, um Floats zu löschen.

Erzielen Sie den Effekt des Float-Löschens, indem Sie nach dem Floating-Element ein Pseudoelement hinzufügen. Die spezifische Implementierungsmethode lautet wie folgt:

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

Durch Hinzufügen des Clearfix-Klassennamens zum übergeordneten Element kann der Float gelöscht werden.

Obwohl diese Methode das Hinzufügen zusätzlicher Stile erfordert, werden keine bedeutungslosen DOM-Elemente hinzugefügt und das Layout wird nicht beeinträchtigt.

4. Flex-Layout verwenden

Flex-Layout ist eine neue Layout-Methode in CSS3. Durch die Verwendung des Flex-Layouts können einige Layoutprobleme leicht gelöst werden, z. B. horizontale Zentrierung, vertikale Zentrierung usw.

Floats können auch mithilfe des Flex-Layouts gelöscht werden. Die spezifische Implementierungsmethode lautet wie folgt:

.container{
    display: flex;
    flex-wrap: wrap;
}

Durch Festlegen des übergeordneten Elements als Flex-Container werden die untergeordneten Elemente automatisch zu Flex-Elementen und der Zeilenumbruch kann über den Flex gesteuert werden -wrap-Attribut. Aufgrund der Eigenschaften des Flex-Layouts enthält das übergeordnete Element alle untergeordneten Elemente und berechnet seine eigene Höhe neu, wodurch der Effekt des Löschens von Floats erzielt wird.

Es ist jedoch zu beachten, dass die Verwendung des Flex-Layouts das ursprüngliche Layout zerstören kann und daher entsprechend den tatsächlichen Anforderungen angepasst werden muss.

Zusammenfassung

Das Obige stellt gängige Floating-Clearing-Methoden vor. Jede Methode hat ihre Vor- und Nachteile. Wählen Sie die für Ihren tatsächlichen Bedarf am besten geeignete Lösung. Aber egal welche Methode verwendet wird, Sie müssen darauf achten, die Floats zu löschen, ohne das ursprüngliche Layout zu zerstören.

Das obige ist der detaillierte Inhalt vonfloat klares HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!