Ausführliche Erklärung zum Löschen von Floats mithilfe von CSS

In diesem Artikel wird hauptsächlich die detaillierte Methode zur Verwendung von CSS zum Löschen von Floats vorgestellt. Es ist erwähnenswert, dass die am Ende des Artikels erwähnte Lösung zum Schließen von Floats ebenfalls einen Versuch wert ist . Freunde in Not können sich auf die

Clear-Floating-Methode
Methode 1: Verwenden Sie ein leeres Element mit dem Clear-Attribut

Verwenden Sie ein leeres Element nach dem Floating-Element , wie zum Beispiel

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

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }   

.clear {   
  clear: both;   
  }

<p class="news">
<img  src="/static/imghw/default1.png"  data-src="news-pic.jpg"  class="lazy"   / alt="Ausführliche Erklärung zum Löschen von Floats mithilfe von CSS" >
<p>some text</p>
<p class="clear"></p>
</p>

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 Darüber hinaus muss HasLayout in IE6 ausgelöst werden, z. B. durch Festlegen der Containerbreite und -höhe für das übergeordnete Element oder Festlegen von Zoom: 1. 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: rightright;   
  }

<p class="news">
<img  src="/static/imghw/default1.png"  data-src="news-pic.jpg"  class="lazy"   / alt="Ausführliche Erklärung zum Löschen von Floats mithilfe von CSS" >
<p>some text</p>
</p>

Methode 3: Fügen Sie einen Float zum Container des Floating-Elements hinzu

Fügen Sie auch einen Float zum Container hinzu des schwebenden Elements Der interne Float kann mithilfe des Attributs gelöscht werden. Dies führt jedoch dazu, dass er als Ganzes schwebt und sich auf das Layout auswirkt. Daher wird dies nicht 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: rightright;   
  }   

.content{   
  clear:both;   
  }

<p class="news">
<img  src="/static/imghw/default1.png"  data-src="news-pic.jpg"  class="lazy"   / alt="Ausführliche Erklärung zum Löschen von Floats mithilfe von CSS" >
<p>some text</p>
<p class="content">***</p>
</p>

Beachten Sie, dass p.content hier Inhalt hat.

Methode 5: Verwenden Sie CSS :after pseudo-element

kombiniert mit :after pseudo-element (beachten Sie, dass es sich hierbei nicht um eine Pseudoklasse, sondern um eine Pseudoklasse handelt). Element, das das nächste Element nach Elementen darstellt) und IEhack, die perfekt mit allen gängigen Mainstream-Browsern kompatibel sind. IEhack bezieht sich hier auf das Auslösen von hasLayout.
Fügen Sie eine Clearfix-Klasse zum Container mit schwebenden Elementen hinzu und fügen Sie dann ein :after-Pseudoelement zu dieser Klasse hinzu, um das Hinzufügen eines unsichtbaren Blockelements (Blockelement) am Ende des Elements zu implementieren, um die schwebenden Elemente zu bereinigen.

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

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }   

.clearfix:after{   
  content: "020";    
  display: block;    
  height: 0;    
  clear: both;    
  visibility: hidden;     
  }   

.clearfix {   
  /* 触发 hasLayout */
  zoom: 1;    
  }

<p class="news clearfix">
<img  src="/static/imghw/default1.png"  data-src="news-pic.jpg"  class="lazy"   / alt="Ausführliche Erklärung zum Löschen von Floats mithilfe von CSS" >
<p>some text</p>
</p>

Fügen Sie am Ende des internen Elements des Containers über CSS-Pseudoelemente ein unsichtbares Leerzeichen „020“ oder einen Punkt „“ hinzu und weisen Sie das Leerzeichen zu Attribut, um es 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 Clear zu verwenden Attribut, auch in schwebenden Elementen Fügen Sie am Ende ein leeres p mit dem Attribut „clear: Both“ hinzu, um das Element zu schließen. Tatsächlich wird die Methode zur Verwendung des Pseudoelements „:after“ auch durch Hinzufügen eines Elements mit dem Inhalt eines Punkts erreicht und das Attribut „clear: Both“ am Ende des Elements.

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

Verwenden Sie die :after-Pseudoelementmethode im Hauptlayout der Webseite und verwenden Sie sie als Hauptmethode zum Bereinigen von Floats; verwenden Sie overflow:hidden; in kleinen Modulen wie ul (achten Sie auf mögliche Probleme mit versteckten Überlaufelementen. Wenn es sich um Floating-Elemente handelt, können interne Floats automatisch ohne spezielle Verarbeitung gelöscht werden.

Schließlich können Sie die relativ perfekte :after-Pseudoelementmethode verwenden, um die Floats zu bereinigen und die Dokumentstruktur klarer zu machen.

Nachtrag: Float löschen oder Float schließen?
Wir verwenden häufig Floats im Webseitenlayout. Damit können wir leichter die gewünschten Effekte erzielen, aber Floats bergen oft einige versteckte Gefahren. Zu diesem Zeitpunkt unternehmen wir normalerweise eine Sache, um die Schwimmer zu entfernen, aber das Löschen der Schwimmer hinterlässt oft versteckte Gefahren. Der folgende Code:

<!DOCTYPE html>   
<html>   
<head>   
    <meta charset="UTF-8">   
    <title>Document</title>   
    <style type=&#39;text/css&#39;>   
        #main{   
            border: 1px solid #000;   
        }   
        #left{   
            float: left;   
            width: 100px;   
            height: 100px;   
            background-color: #f00;   
        }   
        #right{   
            float: left;   
            width: 100px;   
            height: 100px;   
            background-color: #0f0;   
        }   
    </style>   
</head>   
<body>   
    <p id="main">   
        <p id="left"></p>   
        <p id="right"></p>   
    </p>   
</body>   
</html>

Die Darstellung ist wie folgt:

Obwohl „clear:both“ in „foot“ zum Löschen von Floats verwendet wird, kann sich die Höhe von „main“ nicht an die Höhe von Unterelementen anpassen, was zu einem Zusammenbruch führt (durch den Pfeil angezeigt).

Im Folgenden wird der geschlossene Float vorgestellt. Wie der Name schon sagt, dient er dazu, das Floating-Element zu schließen und die Auswirkungen des Floatings zu beseitigen. Derzeit ist Clearfix die am häufigsten verwendete Methode zum Löschen von Floats. Anstatt „clear:both“ in „foot“ einzufügen, fügen Sie insbesondere die folgende CSS-Zeile ein:

#main:after{   
            content: '.';   
            height: 0;   
            visibility: hidden;   
            /*display: block;*/
            clear:both;   
        }

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Löschen von Floats mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!