Was ist Float? Wie löscht CSS Float?

Dieser Artikel stellt Ihnen vor, was Floating ist. Das Prinzip des CSS-Clearings (mit Code) hat einen gewissen Referenzwert.

Ich habe kürzlich etwas über CSS gelernt und festgestellt, dass Floats gelöscht werden müssen, wenn die Höhe zusammenbricht. Um das Prinzip von Floats zu verstehen, habe ich viele Informationen online durchsucht und festgestellt, dass sie nicht sehr gut sind klar und sie hatten alle den gleichen Inhalt. Ich möchte hier mein Verständnis des Prinzips des klaren Schwebens mitteilen,

Wenn Sie bereits sehr gut wissen was schwebend ist und die Wirkung von Floating Sie können direkt zu springen. 3. Wie man Floats beseitigt (wichtige Punkte) Lesen Sie

1. Was ist float
Zuerst müssen wir die Positionierung kennen
Die Position des Elements auf der Seite ist die Positionierung. Bevor wir das Problem lösen, wollen wir zunächst einige Positionierungsmethoden verstehen
1. Gewöhnliche Flusspositionierung statisch (Standardmethode)
Gewöhnliche Flusspositionierung, auch Dokumentflusspositionierung genannt, ist die Standardpositionierungsmethode für Seitenelemente.
Elemente auf Blockebene auf der Seite: einzeln angeordnet von von oben nach unten
Inline-Elemente auf der Seite: eins nach dem anderen von links nach rechts Anordnung
Aber wie zeigt man mehrere Elemente auf Blockebene in einer Zeile an
Hier kommt die schwebende Positionierung
2, schwebende Positionierung float
Der Float-Attributwert ist links/rechts
Dieses Attribut wurde ursprünglich nicht für das Layout, sondern für den Textumbruch verwendet. Später stellten die Leute jedoch fest, dass es auch für das Layout gut war Ich habe es weiterhin verwendet. Manchmal wurde sogar vergessen, es für den Textumbruch zu verwenden.
3. Relative Positionierung relativ
Das Element wird um einen bestimmten Abstand relativ zu seiner ursprünglichen Position verschoben Position, der ursprüngliche Abstand des Elements bleibt weiterhin erhalten
Attribut: Position
Wert: relativ
Verwenden Sie das Offset-Attribut (oben/rechts/unten/links), um die Position zu ändern
4. Absolute Positionierung absolut
Wenn das Element auf absolute Positionierung eingestellt ist. Wenn ja, weist es die folgenden Eigenschaften auf
1. Außerhalb des Dokumentflusses – belegt keinen Seitenraum
2. Behoben Elementposition durch Offset-Attribut
3. Feste Position relativ zum nächstgelegenen positionierten Vorgängerelement
　4. Wenn kein positioniertes Vorgängerelement vorhanden ist, ist die Position relativ zum ursprünglichen enthaltenden Block (Körper, HTML) fixiert
Attribut: Position
Wert: absolut
Koordiniert mit Offset-Attributen (oben/rechts/unten/links) wird eine feste Position erreicht
Feste Positionierung fixiert
Fixieren Sie das Element an eine bestimmte Position auf der Seite und erfolgt nicht mit der Bildlaufleiste. Positionsverschiebung
Attribut: Position
Wert: fest
Wird mit dem Offset-Attribut (oben/rechts/unten/links) verwendet, um eine feste Position zu erreichen

2. Die Wirkung des Schwebens
　Was passiert nach dem Schweben?
1. Schwebend positionierte Elemente werden aus dem Dokumentenfluss ausgeschlossen – aus dem Dokumentenfluss (belegen keinen Platz auf der Seite), und andere Elemente müssen nach vorne kommen, um den Raum auszufüllen
2. Schwebende Elemente wird am übergeordneten Element links oder rechts oder am Rand anderer schwebender Elemente angedockt (Elemente können nur in der aktuellen Zeile schweben)
　3. Schwebende Elemente befinden sich weiterhin innerhalb des übergeordneten Elements
　4 . Probleme bei der Verarbeitung schwebender Elemente – behoben Probleme bei der Anzeige mehrerer Elemente auf Blockebene in einer Zeile
Hinweis
1. Wenn nicht alle schwebenden Elemente in einer Zeile angezeigt werden können, wird das letzte in eine andere Zeile umgebrochen
2. Sobald das Element schwebend ist, wird die Breite adaptiv (die Breite wird durch den Inhalt bestimmt)
3. Sobald das Element schwebend ist, wird es zu einem Element auf Blockebene, insbesondere für Inline-Elemente, das über das verfügt größte Auswirkung
Elemente auf Blockebene: Änderung der Größe möglich
Inline-Elemente: Größenänderung ist nicht zulässig
4. Text, Inline-Elemente und Inline-Blockelemente werden umlaufend angeordnet nicht unter schwimmenden Elementen vergraben werden und schwimmende Elemente geschickt meiden
Welche Auswirkungen wird es nach dem Aufschwimmen geben?
Da das schwebende Element aus dem Dokumentfluss ausbricht, nimmt es keinen Platz auf der Seite ein und hat daher einen gewissen Einfluss auf die Höhe des übergeordneten Elements. Wenn alle in einem Element enthaltenen Elemente schwebende Elemente sind, wird die Höhe des Elements zu 0 (Höhenreduzierung)

3. So löschen Sie schwebende Elemente (Hervorhebung)

Lösungs- und Prinzipanalyse

Es gibt viele Methoden im Internet. Ich werde hier nur eine sehr nützliche Methode vorstellen Legen Sie den Klassennamen fest. Das Prinzip von clearfix

lautet: Wenn alle untergeordneten Elemente schweben, wird das übergeordnete Element zusammengebrochen. Fügen Sie daher nach allen schwebenden untergeordneten Elementen ein nicht schwebendes Element hinzu, um das übergeordnete Element zu stützen gefunden und belegt keinen Platz, daher kann es nicht zugelassen werden. Es ist Inhalt darin, aber wenn Inhalt vorhanden ist, muss er ausgeblendet werden.

.clearfix:after{content:'.';
　　　　　　　　　　clear:both;
　　　　　　　　　　display:block;
　　　　　　　　　　height:0;
　　　　　　　　　　overflow:hidden;
　　　　　　　　　　visibility:hidden;
　　　　　　　　}.clearfix:after{zoom：1；}/*解决IE的问题*/
//visibility：hidden；隐藏元素，但是位置留着
//display：none；隐藏元素，不占据空间，彻底隐藏
//after：伪对象选择符

Empfohlene verwandte Artikel:

Was bedeutet das Wie funktioniert das Attribut „transform-origin“ in CSS? Die Rolle des Transformations-Origin-Attributs

Ein Beispiel für die Erstellung einer Lightning-Verbindungslinie mithilfe der CSS-Sprache

Das obige ist der detaillierte Inhalt vonWas ist Float? Wie löscht CSS Float?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!