So löschen Sie schwebenden Beispielcode in CSS

Überblick

Das Rahmendiagramm dieses Artikels ist wie folgt:

1. Was genau ist Floating?

Die in W3school angegebene Definition von „Schweben“ besagt, dass sich die schwebende Box nach links oder rechts bewegen kann, bis ihre Außenkante die Grenze der enthaltenen Box oder einer anderen schwebenden Box berührt. Da die schwebende Box aus dem normalen Fluss des Dokuments entfernt wird, verhalten sich Blockboxen im normalen Fluss des Dokuments, als ob die schwebende Box nicht existieren würde.

Wenn in Nicht-IE-Browsern (wie etwa Firefox) die Höhe eines Containers automatisch ist und der Inhalt des Containers schwebende Elemente enthält (Schwimmelemente stehen für links oder rechts), kann die Höhe des Containers nicht automatisch an die Höhe des Inhalts angepasst werden. Dies führt dazu, dass der Inhalt über den Container hinausläuft und das Layout beeinträchtigt (oder sogar zerstört) wird. Dieses Phänomen wird als Floating Overflow bezeichnet. Die CSS-Verarbeitung, die durchgeführt wird, um dieses Phänomen zu verhindern, heißt CSS Clearing Floats.

2.Was sind die Merkmale des Schwebens?

Die Eigenschaften des Schwebens können in acht Worten zusammengefasst werden: Etikettentrennung, Kantenhaftung, Zeichenumfang und Schrumpfung.

Zur besseren Erklärung schauen Sie sich bitte die folgende Abbildung an:
Wenn „box1“ nach links schwebt, wird es aus dem Dokumentfluss entfernt (außerhalb der Grenzen) und nach links verschoben (angeheftet), bis seine linke Kante die linke Kante der enthaltenden Box berührt. Da es nicht mehr im Dokumentfluss enthalten ist, nimmt es keinen Platz mehr ein und verdeckt vielmehr Box 2, so dass diese aus dem Blickfeld verschwindet. Befindet sich in Feld 2 Text, wird dieser um Feld 1 herum angeordnet (Wortkreis).

Wenn Sie alle drei Boxen nach links schweben lassen, schwebt Box 1 nach links, bis sie die enthaltene Box trifft, und die anderen beiden Boxen schweben nach links, bis sie die vorher schwebende Box treffen.

Im Folgenden wird auf die vierte Eigenschaft eingegangen - die Kontraktion

Die Breite eines schwebenden Inline-Elements (wie etwa eines Span-Img-Tags) kann ohne die Einstellung von display:block festgelegt werden.

<Stil>
        div{
            schweben: links;
            Hintergrundfarbe: grüngelb;
        }
    </Stil>
</Kopf>
<Text>
<div>
    Dies ist ein Textabschnitt</div>
</body>

Es wurden folgende Ergebnisse erzielt:

Wir alle wissen, dass das Div-Tag ein Blockelement ist und eine einzelne Zeile einnimmt. Im obigen Beispiel nimmt die Breite des Div jedoch nicht mehr eine ganze Zeile ein, nachdem es auf links schwebend eingestellt wurde, sondern wird auf die Breite des internen Elements reduziert. Dies ist die Bedeutung des vierten Merkmals des Schwebens.

3. Welche Nachteile hat das Floaten?

Schauen wir uns zunächst den folgenden Code an:

 <Stil>
      .Elternteil{
          Rand: durchgezogene 5px;
          Breite: 300px;
      }
      .Kind:n-tes-Kind(1){
          Höhe: 100px;
          Breite: 100px;
          Hintergrundfarbe: gelb;
          schweben: links;
      }
      .Kind:n-tes-Kind(2){
          Höhe: 100px;
          Breite: 100px;
          Hintergrundfarbe: rot;
          schweben: links;
      }
      .Kind:n-tes-Kind(3){
          Höhe: 100px;
          Breite: 100px;
          Hintergrundfarbe: grüngelb;
          schweben: links;
      }
    </Stil>
</Kopf>
<Text>
<div Klasse="übergeordnet">
    <div Klasse="Kind"></div>
    <div Klasse="Kind"></div>
    <div Klasse="Kind"></div>
</div>
</body>

Wir möchten, dass der übergeordnete Container die drei schwebenden Elemente umschließt. Das Ergebnis ist jedoch das Folgende:

Dies ist die Nebenwirkung des Schwebens: Die Höhe des übergeordneten Containers nimmt ab, daher ist das Bereinigen des Schwebens offensichtlich von entscheidender Bedeutung.

4. Wie werden Schwimmkörper gereinigt?

Das Löschen von Floats bedeutet nicht, dass Floats entfernt werden. Das Löschen von Floats führt dazu, dass die Höhe des übergeordneten Containers reduziert wird.

Routine 1: Höhe zum übergeordneten Element des schwebenden Elements hinzufügen (schlechte Skalierbarkeit)

Wenn ein Element schweben soll, muss sein übergeordnetes Element eine Höhe haben. Nur eine Kiste mit einer bestimmten Höhe kann das Schweben aufnehmen. Sie können die Höhe des übergeordneten Elements direkt festlegen. In tatsächlichen Anwendungen ist es unwahrscheinlich, dass wir allen Feldern Höhe hinzufügen, was nicht nur problematisch ist, sondern sich auch nicht an die schnellen Änderungen der Seite anpassen kann. Alternativ kann die Höhe des übergeordneten Containers durch den Inhalt (z. B. img-Bilder) erweitert werden. Diese Methode wird in der Praxis häufiger verwendet.

Routine 2: löschen: beides;

Fügen Sie das letzte redundante Element dem letzten untergeordneten Element hinzu und setzen Sie es dann auf „clear:both“, damit das Floating gelöscht werden kann. Ein Punkt, der hier hervorgehoben werden muss, ist, dass das am Ende des übergeordneten Elements hinzugefügte Element ein Element auf Blockebene sein muss, da es sonst die Höhe des übergeordneten Elements nicht unterstützen kann.

    <div id="wrap">
        <div id="inner"></div>
        <div style="clear: beide;"></div>
    </div>

  #wickeln{
          Rand: 1px durchgezogen;
    }
    #innere{
          schweben: links;
          Breite: 200px;
          Höhe: 200px;
          Hintergrund: rosa;
    }

Routine 3: Float zum Löschen von Pseudoelementen

Die obige Methode kann den Float sicherlich löschen, aber wir möchten diese bedeutungslosen redundanten Elemente nicht zur Seite hinzufügen. Wie können wir den Float zu diesem Zeitpunkt löschen?
Durch die Kombination des Pseudoelements :after und des IEhacks ist eine perfekte Kompatibilität mit allen gängigen Browsern möglich. Der IEhack bezieht sich hier auf das Auslösen von hasLayout.

<div id="wrap" Klasse="clearfix">
    <div id="inner"></div>
</div>

   #wickeln {
        Rand: 1px durchgezogen;
      }
      #inneres {
        schweben: links;
        Breite: 200px;
        Höhe: 200px;
        Hintergrund: rosa;
      }
      /*Haslayout aktivieren*/
      .klarfix {
        *Zoom: 1;
      }
      /*IE6 7 unterstützt keine Pseudoelemente*/
      .clearfix:nach {
        Inhalt: '';
        Anzeige: Block;
        klar: beides;
        Höhe: 0;
        Zeilenhöhe: 0;
        Sichtbarkeit: versteckt; // Dem Browser erlauben, es zu rendern, aber nicht anzuzeigen}

Fügen Sie dem übergeordneten Container des Floating-Elements eine Clearfix-Klasse hinzu und fügen Sie dieser Klasse dann ein :after-Pseudoelement hinzu, um am Ende des Elements ein unsichtbares Blockelement hinzuzufügen und so das Floating-Element zu löschen. Dies ist eine allgemeine Lösung zum Reinigen von Schwimmern, empfohlen

Routine 4: Verwenden Sie overflow:hidden für das übergeordnete Element;

Diese Lösung ermöglicht es dem übergeordneten Container, einen BFC (Blockformatierungskontext) zu bilden, und BFC kann Floats enthalten, was normalerweise verwendet wird, um das Problem des Höhenkollapses schwebender übergeordneter Elemente zu lösen.

So lösen Sie BFC aus

Wir können BFC auslösen, indem wir dem übergeordneten Element die folgenden Attribute hinzufügen:

• Float ist links | rechts
• Überlauf ist ausgeblendet | auto | scorll
• Anzeige ist Tabellenzelle | Tabellenüberschrift | Inline-Block
• Position ist absolut | fest

Sie können hier overflow:auto für das übergeordnete Element festlegen, aus Kompatibilitätsgründen mit dem Internet Explorer ist es jedoch am besten, overflow:hidden zu verwenden.

Diese Methode hat jedoch einen Fehler: Wenn ein Teil des Inhalts aus der Box herausfällt, schneidet diese Methode den überschüssigen Teil ab und kann daher derzeit nicht verwendet werden.

Hauptfunktionen von BFC:

• Der BFC-Container ist ein isolierter Container, der nicht mit anderen Elementen interferiert. Daher können wir den BFC verwenden, der zwei Elemente auslöst, um das Problem des vertikalen Randkollapses zu lösen.
• BFC überlappt keine schwebenden Elemente
• Ein BFC kann Floats enthalten und Floats löschen. Routine 5: br-Tag löschen schweben

Das br-Tag hat ein Attribut: clear. Dieses Attribut ist ein leistungsstarkes Tool zum Löschen von Floats. Setzen Sie das Attribut „clear“ im Tag „br“ und weisen Sie den Wert „all“ zu. Dadurch wird der Schwimmer gelöscht.

    <div id="wrap">
      <div id="inner"></div>
      <br löschen="alles" />
    </div>

   #wickeln {
        Rand: 1px durchgezogen;
      }
      #inneres {
        schweben: links;
        Breite: 200px;
        Höhe: 200px;
        Hintergrund: rosa;
      }

Wenn Sie diesen Artikel hilfreich finden, liken und folgen Sie bitte meinem GitHub-Blog. Vielen Dank!

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.