Welches Attribut wird verwendet, um Float in CSS zu löschen?

Es gibt zwei Attribute, die zum Löschen von Floats in CSS verwendet werden: 1. Das Attribut „clear“ kann definieren, welche Seite des Elements nicht floaten darf. Es wird normalerweise als „clear:both;“ geschrieben, was bedeutet, dass keine Seite des Elements darf schweben. Das ist es. 2. Überlaufattribut, das den Stil „overflow:hidden;“ für das übergeordnete Element definiert, kann auch Floating löschen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist CSS Clear Float?

In Nicht-IE-Browsern (wie Firefox), wenn die Höhe des Containers automatisch ist und schwebende Elemente (Float ist links oder rechts) im Inhalt des Containers vorhanden sind, in diesem Fall die Höhe von Der Container kann nicht automatisch gedehnt werden, um sich an die Höhe des Inhalts anzupassen, was dazu führt, dass der Inhalt über den Container hinausläuft und das Layout beeinträchtigt (oder sogar zerstört). Dieses Phänomen wird als Float-Überlauf bezeichnet, und die zur Verhinderung dieses Phänomens durchgeführte CSS-Verarbeitung wird als CSS-Clear-Float bezeichnet.

Um das W3C-Beispiel zu zitieren: Der Nachrichtencontainer umgibt keine schwebenden Elemente.

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div>
<img  alt="Welches Attribut wird verwendet, um Float in CSS zu löschen?" >
<p>some text</p>
</div>

Floating-Methode löschen

Methode 1: Verwenden Sie ein leeres Element mit dem Attribut „clear“

Verwenden Sie ein leeres Element nach dem Floating-Element, z. B.

< ;/div> und weisen Sie das Attribut .clear{clear:both;} in CSS zu, um die Floats zu löschen. Sie können auch
oder

---

verwenden.

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div>
<img  alt="Welches Attribut wird verwendet, um Float in CSS zu löschen?" >
<p>some text</p>
<div></div>
</div>

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.

Methode 2: Verwenden Sie das Überlaufattribut von CSS

Fügen Sie overflow:hidden; oder overflow:auto; zum Container des Floating-Elements hinzu, um den Float zu löschen, z. B Festlegen der Containerbreite und -höhe für das übergeordnete Element. Oder stellen Sie Zoom:1 ein.

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 einer Bereinigung der schwebenden Elemente erzielt wird.

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;  *zoom: 1;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div>
<img  alt="Welches Attribut wird verwendet, um Float in CSS zu löschen?" >
<p>some text</p>
</div>

Methode 3: Floats zum Container mit Floating-Elementen hinzufügen

Fügen Sie ein Float-Attribut zum Container mit Floating-Elementen hinzu, um die internen Floats zu löschen. Dadurch wird es jedoch insgesamt floaten und sich auf das Layout auswirken, sodass dies nicht der Fall ist empfohlen.

Methode 4: Verarbeitung benachbarter Elemente verwenden

Machen Sie nichts und 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>
<img  alt="Welches Attribut wird verwendet, um Float in CSS zu löschen?" >
<p>some text</p>
<div></div>
</div>

Methode Fünf: Verwenden Sie CSSs :after-Pseudoelement

Kombiniert mit dem :after-Pseudoelement (beachten Sie, dass dies keine Pseudoklasse, sondern ein Pseudoelement ist, das das nächste Element nach einem Element darstellt) und IEhack ist perfekt mit dem aktuellen Mainstream kompatibel. Bei allen gängigen Browsern bezieht sich IEhack hier auf das Auslösen von hasLayout.

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

.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>
<img  alt="Welches Attribut wird verwendet, um Float in CSS zu löschen?" >
<p>some text</p>
</div>

Fügen Sie am Ende des inneren Elements des Containers über CSS-Pseudoelemente ein unsichtbares Leerzeichen „020“ oder einen Punkt „“ hinzu und weisen Sie das Clear-Attribut zu, um den Float zu löschen. 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.

Zusammenfassung

Anhand des obigen Beispiels können wir leicht erkennen, dass die Methoden zum Löschen von Floats in zwei Kategorien unterteilt werden können:

Eine besteht darin, das Attribut „clear“ zu verwenden, einschließlich des Hinzufügens eines leeren Elements mit „clear“: Both-Attribut am Ende des schwebenden Elements div, um das Element zu schließen. Tatsächlich wird die Methode zur Verwendung des :after-Pseudoelements auch durch Hinzufügen eines Elements mit dem Inhalt eines Punkts und des clear: Both-Attributs am Ende erreicht des Elements.

Die zweite besteht darin, den BFC (Block Formatting Contexts, Formatierungskontext auf Blockebene) des übergeordneten Elements des schwebenden Elements auszulösen, sodass das übergeordnete Element schwebende Elemente enthalten kann.

(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonWelches Attribut wird verwendet, um Float in CSS zu löschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!