Ausführliche Erklärung der Auswirkungen von Floating in CSS und wie man Floating entfernt

• Beim ersten Telefoninterview fragte mich der Interviewer, welche Methoden Sie kennen, um Floating zu entfernen?
  Dies ist meine Antwort: „Es gibt zwei Methoden. Eine besteht darin, „clear: Both“ für das Element zu verwenden, das aus float entfernt werden muss; die andere besteht darin, „overflow:hidden". Um ehrlich zu sein, habe ich es nicht geübt, als ich über die zweite Methode gesprochen habe. Ich habe es nur gelesen und vage gesagt.
  

• Diese Frage wurde auch im zweiten Interview gestellt, aber aufgrund der Erkenntnisse aus dem ersten Interview habe ich noch einmal ein Buch gelesen. Es gibt ein spezielles Kapitel im „CSS Design Guide“. Da geht es um verschiedene Methoden zum Entfernen von Floats. Ich habe das Buch nur einmal gelesen und es nicht mit den Händen getippt 🎜>2. Überlauf: versteckt;

  3. Floating-Elternelement
  4. Fügen Sie ein de-floating-Element nach dem Floating-Element hinzu
  Nachdem sie meine Schwester interviewt hatte, fügte sie hinzu: „Schauen Sie sich diese Horizontale an
  navigation
  Spalte. Es muss mit Floating implementiert werden, daher kann es definitiv nicht verwendet werden, denn wenn es ein Untermenü in der Zeilenleiste gibt, ist es unsichtbar? Meine damalige Antwort war: Fügen Sie ein Element hinzu, das schwebende Elemente nach dem schwebenden Element entfernt. Der Interviewer hat nicht gesagt, ob es richtig oder falsch war.
  Sie müssen noch selbst eine Navigation durchführen 🎜>Ich habe hier bereits eine Notiz zum Floating-Prinzip geschrieben. Der Inhalt stammt aus dem Buch „CSS Design Guide“
  Die Auswirkung von Floating
  

Leistung moderner Browser

Platzierung zweier benachbarter Inline-Elemente, wenn das zweite Inline-Element links schwebend ist, dann nach dem Inline-Element Wenn es auf „Float“ eingestellt ist, wird seine

Anzeige

in „Block“ geändert, aber seine Größe wird entsprechend der Einstellung oder der Größe seines Inhalts angezeigt und nimmt nicht den gesamten Zeilenbereich, das Inline-Element daneben, ein befindet sich hinter dem schwebenden Element in dieser Zeile und ist nicht gleichwertig mit dem schwebenden Element.
• Wenn es sich jedoch neben einem Inline-Block-Level-Element mit einer festgelegten Breite befindet, dann dieses Inline-Block-Level-Element befindet sich nicht auf derselben Stufe wie das schwebende Element.

  Wenn es sich neben einem Element auf Blockebene befindet, nimmt dieses Element auf Blockebene den Platz ein das soll schwebend sein. Ich kann Ihnen nicht sagen, warum

In IE7 und früheren Versionen des
• IE-Browsers sind die Inline-Elemente neben

  
  Unter einer neuen Zeile mit schwebenden Elementen ist es nicht noch seltsamer? und das unmittelbar darauf folgende Element wird auf die Ebene des schwebenden Elements angehoben, sofern der Platz dies zulässt. Auf derselben Ebene behält das auf schwebende Element eingestellte Element seine ursprüngliche Position und beobachtet stillschweigend, wie sich die Elemente ändern. Der Rand des übergeordneten Elements des schwebenden Elements wird auch auf die untergeordneten Elemente verkleinert, die nicht innerhalb des übergeordneten Elements schweben.
  
  
  Nachdem das Inline-Element schwebend ist

  Tatsächlich scheint dies in den Übungen, die ich gerade mache, noch nie so eingerichtet worden zu sein, aber es bringt eine andere Erfahrung mit sich.

• Was das Floating von Inline-Elementen betrifft, bin ich beim Verweisen auf den Quellcode anderer Websites nicht darauf gestoßen, daher werde ich es zunächst in Ruhe lassen.
  

• Im Folgenden sind mehrere Methoden zum Umschließen schwebender Elemente und die geeigneten Situationen für jede Methode aufgeführt.

  
  
  

Fügen Sie einfach ein untergeordnetes Element zum HTML-Tag hinzu und wenden Sie das klare
• -Attribut

  darauf an.
  

Aber wenn wir dieses reine Leistungselement insbesondere nicht hinzufügen möchten, können wir CSS verwenden, um dieses klare Element hinzuzufügen. Fügen Sie dem Abschnitt eine Klasse hinzu:

• Methode 1:
Hinzufügen: overflow:hidden zum übergeordneten Element
• Diese Methode erzwingt die übergeordnetes Element Umgibt schwebende untergeordnete Elemente.

  Eigentlich: Der eigentliche Zweck der overflow:hidden-Anweisung besteht darin, zu verhindern, dass das enthaltende Element durch übergroßen Inhalt gestreckt wird. Nach der Anwendung von overflow:hiden behält das enthaltende Element weiterhin seine festgelegte Breite und Höhe bei und übergroßer Textinhalt wird vom Container abgeschnitten. Darüber hinaus hat overflow:hidden einen weiteren Effekt: Es kann das übergeordnete Element zuverlässig zwingen, seine schwebenden untergeordneten Elemente einzuschließen. Die Konsequenz ist jedoch, dass der Textinhalt nicht mehr sichtbar ist, sobald er die eingestellte Breite überschreitet.

• Methode 2: Das übergeordnete Element gleichzeitig schweben lassen
  Tatsächlich ist dies nicht eindeutig schwebend für das gesamte Website-Layout, sondern lässt das übergeordnete Element lediglich umgeben Das schwebende untergeordnete Element, aber obwohl das schwebende übergeordnete Element die schwebenden untergeordneten Elemente umgibt, kann es die Auswirkungen des schwebenden übergeordneten Elements selbst auf das Layout der gesamten Website nicht lösen. Ich habe gesehen, dass einige Website-Quellcodes dies immer noch gerne verwenden Methode, und umgeben Sie dann in dieser das schwebende übergeordnete Element mit einem anderen übergeordneten Element und legen Sie die Breite und Höhe dafür fest, um sicherzustellen, dass es das Layout anderer Inhalte auf der Webseite nicht beeinträchtigt.

• Methode 3: Ein nicht schwebendes klares Element hinzufügen
  besteht darin, am Ende des übergeordneten Elements ein nicht schwebendes untergeordnetes Element hinzuzufügen und dann Löschen Sie den Float des untergeordneten Elements.
  Es gibt jedoch zwei Möglichkeiten, am Ende des enthaltenden Elements ein untergeordnetes Element als Clearing-Element hinzuzufügen.

Diese drei Methoden werden implementiert, indem übergeordnete Elemente verwendet werden, um schwebende untergeordnete Elemente zu umgeben.
Analysieren Sie diese drei Methoden:
1. Sie können overflow:hidden nicht auf das Element der obersten Ebene des Dropdown-Menüs anwenden; andernfalls wird das Dropdown-Menü als untergeordnetes Element verwendet nicht angezeigt werden.
2. Sie können die Floating-Parent-Element-Technologie nicht für ein Element verwenden, dessen Rand automatisch zentriert ist, da es sonst nicht mehr zentriert ist.
Aber was ist, wenn in manchen Fällen kein übergeordnetes Element vorhanden ist?
Ich würde auf jeden Fall sagen, fügen Sie noch eins hinzu, es ist nicht problematisch, aber es erhöht die Durchquerungstiefe
Wenn ein Element vom schwebenden Element beeinflusst werden möchte, aber auch nicht, dass die Elemente danach betroffen sind Um die Auswirkungen zu beeinflussen, können Sie ein Element auf Blockebene innerhalb dieses Elements hinzufügen und dann das Float für dieses Element auf Blockebene löschen Stellen Sie eine zusätzliche Höhe für dieses Element ein, da der Effekt sonst nicht wirksam ist. Ich hoffe, dass die Leute, die diesen Artikel lesen, ihn selbst testen können.

【Verwandte Empfehlungen】

1. Kostenloses CSS-Online-Video-Tutorial

2.CSS-Online-Handbuch

3. php.cn Dugu Jiujian (2) – CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Auswirkungen von Floating in CSS und wie man Floating entfernt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!