Das L?schen von Schwimmern ist der Schlüssel zum L?sen von CSS -Layoutproblemen. Wenn Elemente schweben, l?st sie sich vom Dokumentstrom ab, wodurch der Beh?lter stark zusammenbricht und den Layout -Effekt beeinflusst. Gemeinsame L?sungen sind: 1. Verwenden Sie die ClearFix-Methode, um Inhalte einzufügen und Schwimmer durch Pseudoelemente zu l?schen, was für moderne Browser ohne zus?tzliche HTML-Elemente geeignet ist; 2. Verwenden Sie überlaufattribute (z. B. überlauf: versteckt oder überlauf: automatisch), um schwimmende Elemente einzuschlie?en, was einfach ist, aber Scroll -Stangen erzeugen kann. 3. Einfügen leere Elemente mit klar: Beide Stil, um klare Schwimmer zu erzwingen, was effektiv ist, aber nicht-semantische Tags hinzufügt. 4. Verwenden Sie moderne Layout -Technologien wie Flexbox oder Grid, um Schwimmer zu ersetzen, wodurch das Layout einfacher und reaktionsschneller wird. Durch die Auswahl der richtigen Methode gem?? den Projektanforderungen k?nnen Probleme effektiv vermeiden, die durch das Schwimmen verursacht werden.

Wenn es um Layoutprobleme in CSS geht, ist es eines der klassischeren Probleme mit schwimmenden Elementen. Wenn Sie jemals einen Container zusammenbrechen, weil die Kinder schweben, wissen Sie, wovon ich spreche. Die L?sung? Diese Schwimmer richtig kl?ren. Es gibt verschiedene M?glichkeiten, dies zu tun, und jeder hat seinen eigenen Anwendungsfall.

Was passiert, wenn Sie keine Schwimmer l?schen?

Bevor Sie in die Kl?rung von Floats eintauchen, lohnt es sich, zu verstehen, warum es wichtig ist. Wenn ein Element schwebt (normalerweise mit float: left oder float: right ), wird es aus dem normalen Dokumentfluss entnommen. Dies bedeutet, dass der übergeordnete Container m?glicherweise nicht mehr um die schwimmenden Elemente wickelt, was Layoutprobleme wie überlappende Inhalte oder fehlende Hintergründe verursachen kann.

Dies ist besonders auff?llig, wenn Sie ein einfaches Layout wie dieses haben:

 <div class = "container">
  <div class = "box" style = "float: links"> links </div>
  <div class = "box" style = "float: rechts"> rechts </div>
</div>

Ohne L?schen k?nnte .container mit einer H?he von Null enden, obwohl es zwei sichtbare Kisten enth?lt.

Unter Verwendung der ClearFix -Methode

Eine der h?ufigsten und zuverl?ssigsten Techniken zum L?schen von Schwimmern ohne zus?tzliches Markup ist die ClearFix -Methode. Es verwendet Pseudo-Elemente ( ::after ), um Inhalte einzufügen, die den Float l?schen.

So sieht es in CSS aus:

 .ClearFix :: After {
  Inhalt: "";
  Anzeige: Tabelle;
  klar: beides;
}

Fügen Sie dann einfach die clearfix -Klasse zu Ihrem Container hinzu:

 <div class = "Container clearFix">
  <div class = "box" style = "float: links"> links </div>
  <div class = "box" style = "float: rechts"> rechts </div>
</div>

• Funktioniert gut in modernen Browsern
• Es erfordert keine zus?tzlichen HTML -Elemente
• H?lt HTML semantisch und sauber

Sie werden oft Variationen dieser Methode sehen, einige einschlie?lich zoom: 1 für ?ltere Versionen von Internet Explorer, aber in den meisten modernen Projekten ist dieser Teil nicht mehr erforderlich.

Verwenden von überlauf, um Schwimmer zu enthalten

Ein weiterer einfacher Ansatz ist die Einstellung der overflow auf den Container. Sie k?nnen overflow: auto oder overflow: hidden .

 .Container {
  überlauf: versteckt; / * oder automatisch */
}

Dies zwingt den Beh?lter, sich auszudehnen, und enth?lt seine schwimmenden Kinder.

• Sehr einfach zu implementieren
• Kann manchmal unbeabsichtigte Scrollbars verursachen, wenn der Inhalt überl?uft
• Technisch gesehen nicht "Clearing", enth?lt aber effektiv Schwimmer

Dieser Trick funktioniert überraschend gut und ist nützlich, wenn Sie eine schnelle L?sung wünschen, ohne Klassen oder zus?tzliche Elemente hinzuzufügen.

L?schen mit einem speziellen Element

In den frühen Tagen des Webdesigns fügten Entwickler h?ufig ein <div> mit clear: both am Ende einer Gruppe schwebender Elemente.

 <div class = "container">
  <div style = "float: links"> links </div>
  <div style = "float: rechts"> rechts </div>
  <div style = "clear: beide"> </div>
</div>

W?hrend diese Methode noch funktioniert, gilt sie als weniger elegant, weil:

• Fügt nicht-semantisches Markup hinzu
• Kann schwerer zu pflegen sein
• Im Allgemeinen ersetzt durch bessere Methoden wie ClearFix

Wenn Sie jedoch innerhalb eines CMS- oder Vorlagensystems arbeiten, bei dem CSS-?nderungen begrenzt sind, kann dieser Brute-Force-Ansatz die Aufgabe erledigen.

Moderne Alternativen mit Flexbox und Gitter

Wenn Sie heute neue Layouts bauen, müssen Sie sich m?glicherweise überhaupt nicht mit Floats zu besch?ftigen. Moderne Layout-Tools wie Flexbox- und CSS-Netzhandel-Ausrichtung und Abstand, ohne sich auf Float-basierte Hacks zu verlassen.

Zum Beispiel einen Container in eine Flexbox verwandeln:

 .Container {
  Anzeige: Flex;
  Rechtfertigungsbek?mpfung: Weltraum zwischen;
}

Dies erzielt ein ?hnliches visuelles Ergebnis wie zwei links und rechts schwebende Elemente-jedoch ohne eine floatbezogene Reinigung erforderlich.

• Sauberer und vorhersehbarer als Floats
• In vielen F?llen standardm??ig reagieren
• Floats ist immer noch für den Legacy -Code von Bedeutung, werden aber in neuen Projekten nicht ben?tigt

Es muss kein Schmerzpunkt sein. Egal, ob Sie mit ClearFix-, überlauf- oder modernen Layout -Techniken gehen, abh?ngig von Ihren Projektanforderungen gibt es eine solide Option. Denken Sie daran, zu überprüfen, wie sich Ihre Container verhalten, wenn sie schwebende Elemente halten - es ist leicht zu übersehen, aber es wird sp?ter gr??ere Kopfschmerzen vermieden.

Grunds?tzlich ist das.

Das obige ist der detaillierte Inhalt vonL?schen von Schwimmern mit verschiedenen CSS -Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!