Welche Möglichkeiten gibt es, Floats in CSS zu löschen? Einführung in vier Methoden zum Löschen von CSS-Floats

Das Löschen von Floats durch CSS kommt häufig im CSS-Layout vor. Wie löscht man Floats in CSS? In diesem Artikel erfahren Sie, wie Sie Floats in CSS löschen und warum Sie CSS-Floats verwenden sollten.

Unser letzter ArtikelWas bedeutet CSS Float? Warum muss CSS Floats löschen? Es wurde erwähnt, dass CSS-Floating verwendet wird, da einige Elemente in CSS Blockebenenelemente sind und automatisch eine neue Zeile beginnen. Es gibt auch eine andere Art von Inline-Elementen, nämlich Inline-Elemente, und sie bleiben bestehen mit dem vorherigen Inhalt wird in „einer Zeile“ angezeigt; manchmal müssen wir dieses Layout ändern, was die Verwendung von CSS-Floating erfordert. Kommt es jedoch zu einem „Höheneinbruch“, müssen die Schwimmer geräumt werden. Welche Methoden gibt es also, um Floats in CSS zu löschen?

Werfen wir einen Blick auf die vier Methoden zum Löschen von Floats in CSS.

CSS-Clear-Float-Methode eins:

Verwenden Sie ein leeres Element mit dem Clear-Attribut

Verwenden Sie ein Element nach dem Floating-Element Leere Elemente wie

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

Beschreibung:

Vorteile: Einfach, weniger Code, gute Browserkompatibilität.

Nachteile: Es muss eine große Anzahl nicht semantischer HTML-Elemente hinzugefügt werden, der Code ist nicht elegant genug und später nicht einfach zu warten.

CSS-Clear-Float-Methode zwei:

Verwenden Sie das CSS-Überlaufattribut

, um dem Floating-Container einen Überlauf hinzuzufügen element:hidden; oder overflow:auto; kann den Float löschen. Darüber hinaus muss hasLayout in IE6 ausgelöst werden, z. B. das Festlegen der Containerbreite und -höhe für das übergeordnete Element oder das Festlegen von zoom:1.

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Erklärung:

Nach dem Hinzufügen des Überlaufattributs kehrt das schwebende Element zur Containerebene zurück, wodurch die Höhe des Containers erhöht wird, wodurch der Effekt der Bereinigung erzielt wird schweben.

Vorteile: Es gibt keine strukturellen und semantischen Probleme und die Codemenge ist sehr gering.

Nachteile: Wenn der Inhalt zunimmt, kann es leicht zu einem automatischen Zeilenumbruch kommen, wodurch der Inhalt beschädigt wird ausgeblendet werden und Elemente, die überlaufen müssen, nicht angezeigt werden können; Im Jahr 2004 entdeckte POPO, dass overflow:hidden dazu führen würde, dass die mittlere Schaltfläche fehlschlägt. Dies ist für mich als Multi-Tab-Browsing-Controller inakzeptabel. Also nicht verwenden.

CSS-Clear-Float-Methode drei:

Verarbeitung benachbarter Elemente verwenden

Nichts tun , Fügen Sie dem Element hinter dem schwebenden Element das Attribut „clear“ hinzu.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.content{
  clear:both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>

CSS-Clear-Float-Methode vier:

Verwenden Sie CSSs :after Pseudo-Element

kombiniert mit :after Pseudo- element (Beachten Sie, dass dies keine Pseudoklasse ist, sondern ein Pseudoelement, das das nächste Element nach einem Element darstellt) und IEhack, die mit allen gängigen Mainstream-Browsern perfekt kompatibel sind. IEhack bezieht sich hier auf das Auslösen von hasLayout.

Fügen Sie eine Clearfix-Klasse zum Container des Floating-Elements hinzu und fügen Sie dann ein :after-Pseudoelement zu dieser Klasse hinzu, um am Ende des Elements ein unsichtbares Blockelement (Blockelement) hinzuzufügen, um das zu bereinigen schweben.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }
.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }
<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Beschreibung: Am Ende des internen Elements des Containers wird durch ein CSS-Pseudoelement ein unsichtbares Leerzeichen „020“ oder ein Punkt „“ hinzugefügt, und das Clear-Attribut wird zum Löschen des Floats zugewiesen. Es ist zu beachten, dass für IE6- und IE7-Browser ein zoom:1; zur Clearfix-Klasse hinzugefügt werden muss, um haslayout auszulösen.

Abschließend: Einzelheiten zu einigen Attributen im obigen Artikel finden Sie im CSS-Handbuch.

Verwandte Empfehlungen:

Zusammenfassung gängiger Methoden zum Löschen von Floats im CSS_Experience-Austausch

Nicht vergessen Um Floats in CSS zu löschen, löschen Sie:both_Experience Exchange

Artikel zu Fähigkeiten im Zusammenhang mit Float in CSS_Experience Exchange

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Floats in CSS zu löschen? Einführung in vier Methoden zum Löschen von CSS-Floats. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!