So implementieren Sie Element-Floating und Clear-Floating mit CSS

So implementieren Sie Element-Floating und Clear-Floating mit CSS

Grundlegende Einführung in das Floating

  • Im Standarddokumentenfluss werden Elemente in zwei Typen unterteilt:塊級元素und行內元素. Wenn Sie möchten, dass einige Elemente sowohl die Eigenschaften von Blockelementen als auch von Inline-Elementen haben, können Sie diese Elemente nur aus dem Standarddokumentenfluss entfernen.
  • Durch Schweben können Elemente außerhalb des standardmäßigen Dokumentflusses liegen. So können mehrere Elemente in derselben Zeile platziert werden und die Breite und Höhe können festgelegt werden.
  • Tatsächlich wird das Schweben durch das float Attribut erreicht.
  • Tabelle mit Beschreibungen der Float-Attributwerte:

Eigenschaftswert beschreiben
links Legt fest, dass das Element links schwebt.
Rechts Legt fest, dass das Element rechts schwebt.

Richtiges Schweben üben

  • Lassen Sie uns mit der Praxis des Rechtsschwebens beginnen. Der Übungsinhalt lautet wie folgt: Stellen Sie das Element mit class .box1 so ein, dass es rechts schwebt.
  • Bevor wir uns mit der Praxis des Schwebens befassen, schauen wir uns zunächst die Struktur der Schwebeelemente an.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schweben</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
  </div>
</body>
</html>

Ergebnisdiagramm

Warum ist das resultierende Bild eine Grenzlinie? Da im div Tag noch kein Inhalt vorhanden ist, werden wir nun die Breite und Höhe des untergeordneten div Tags auf 100px Pixel festlegen und eine Hintergrundfarbe hinzufügen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schweben</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
       }
       .box2{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
  </div>
</body>
</html>

Ergebnisdiagramm

  • Warum sind sie in 3 Zeilen angeordnet? Weil die 3 div Tags alle Blockebenenelemente sind.
  • Nun setzen wir das Element mit class .box1 so, dass es nach rechts schwebt.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schweben</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
         schweben: rechts;
       }
       .box2{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
  </div>
</body>
</html>

Ergebnisdiagramm

Hinweis: Jetzt stellen wir fest, dass die Höhe calss .box Elements kürzer geworden ist, was bedeutet, dass das schwebende Element vom Standarddokumentfluss getrennt wurde und keinen Platz mehr einnimmt. Es schwebt nach rechts und hört auf zu schweben, wenn es an den Rand seines übergeordneten Elements schwebt.

Links-Float-Übung

Lassen Sie uns mit der Übung des Linksschwebens beginnen. Der Übungsinhalt lautet wie folgt: Stellen Sie das Element mit class .box1 so ein, dass es linksschwebt.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schweben</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
         schweben: links;
       }
       .box2{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
  </div>
</body>
</html>

Ergebnisdiagramm

  • Lassen Sie uns zunächst das Prinzip des Schwebens verstehen und dann erklären, warum das Element mit class .box2 unsichtbar ist.
  • Nun zeige ich euch zwei Bilder vom praktischen Ergebnis:

Ergebnisse Abbildung A

Ergebnisse Abbildung B

  • Durch diese beiden Ergebnisbilder können wir Schweben einfach als „Driften“ verstehen. Zum Beispiel:
  • Angenommen, class Klassenattributwert .box ist ein Teich und 3 untergeordneten Elemente sind allesamt Dinge, die auf der Oberfläche des Teichs schwimmen können. Jetzt lassen wir das Element mit calss .box1 auf der Oberfläche des Teichs schwimmen, sodass es keinen Platz mehr im Teich einnimmt.
  • Da wir verstehen, dass „schwebend“ bedeutet, dass es auf der Oberfläche des Teichs schwimmen muss, sich aber kein schwimmendes Element innerhalb der Oberfläche des Teichs befindet, bedeutet die Tatsache, dass das Element mit class .box2 unsichtbar ist, nicht, dass es nicht existiert, sondern nur durch das Element mit dem class .box1 blockiert wird. Nun setzen wir die Breite des Elements mit dem class .box2 auf 150px Pixel.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schweben</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
         schweben: links;
       }
       .box2{
         Breite: 150px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
  </div>
</body>
</html>

Ergebnisdiagramm

Hinweis: Es stellt sich heraus, dass das Element mit dem class .box2 existiert.

Als nächstes setzen wir calss Attributwert des .box2 -Elements auf „float left“, um zu sehen, welche unterschiedlichen Effekte es gibt

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schweben</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
         schweben: links;
       }
       .box2{
         Breite: 150px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
         schweben: links;
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
  </div>
</body>
</html>

Ergebnisdiagramm

  • Das Element mit dem class .box2 schwebt jedoch nicht links am Rand seines übergeordneten Elements. Warum befindet es sich hinter dem class .box1 ? Da das übergeordnete Element bereits über ein schwebendes untergeordnetes Element verfügt, schweben die nachfolgenden untergeordneten Elemente hinter den vorherigen schwebenden Elementen.
  • Nun setzen wir das Element mit dem class .box3 auf links schweben und sehen, welche unterschiedlichen Auswirkungen dies hat.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schweben</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
         schweben: links;
       }
       .box2{
         Breite: 150px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
         schweben: links;
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
         schweben: links;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
  </div>
</body>
</html>

Ergebnisdiagramm

Hinweis: Nachdem das schwebende Element schwebt, umschließt sein übergeordnetes Element das schwebende untergeordnete Element nicht mehr innerhalb des übergeordneten Elements, sodass im Ergebnisbild eine schwarze Rahmenlinie angezeigt wird. Wenn Sie dies nicht verstehen, lesen Sie bitte den ersten praktischen Inhalt.

Setzen Sie das Inline-Element auf Float

  • Wenn wir Float für Inline-Elemente festlegen, haben die Inline-Elemente die Eigenschaften von Elementen auf Blockebene.
  • Lassen Sie uns mit der Übung zum Festlegen von Float für Inline-Elemente beginnen. Der Übungsinhalt lautet wie folgt: Legen Sie span -Tag im div Tag so fest, dass es links schwebt.
  • Bevor wir den linken Float festlegen, schauen wir uns zunächst die Auswirkungen der Festlegung von Breite, Höhe und Hintergrundfarbe des span Tags an.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schweben</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
       }
       .box2{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
       
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
       
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <span class="box1">Lächeln ist der erste Glaube 1</span>
    <span class="box2">Lächeln ist der erste Glaube 2</span>
    <span class="box3">Lächeln ist der ursprüngliche Glaube 3</span>
  </div>
</body>
</html>

Ergebnisdiagramm

  • Jetzt stellen wir fest, dass das Festlegen der Breite und Höhe span Tags auf 100px Pixel keine Wirkung zeigt, da span Tag immer noch ein Inline-Element ist.
  • Nun setzen wir span -Tag so, dass es links schwebt, und dann werden wir den Effekt sehen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schweben</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
         schweben: links;
       }
       .box2{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
        schweben: links;
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
        schweben: links;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <span class="box1">Lächeln ist der erste Glaube 1</span>
    <span class="box2">Lächeln ist der erste Glaube 2</span>
    <span class="box3">Lächeln ist der erste Glaube</span>
  </div>
</body>
</html>

Ergebnisdiagramm

Hinweis: Nachdem das Inline-Element auf Float gesetzt wurde, verfügt es über die Eigenschaften eines Blockelements.

Schwebende Zusammenfassung festlegen

  • Zu den schwebenden Funktionen gehören:
  • Floating-Elemente werden aus dem Standarddokumentenfluss entfernt und nehmen im übergeordneten Element keinen Platz mehr ein.
  • Schwebende Elemente liegen auf einer höheren Ebene als die Elemente im Standarddokumentenfluss und verdecken die Elemente im Standarddokumentenfluss.
  • Schwebende Elemente schweben nach links oder rechts. Schwebende Elemente hören auf zu schweben, wenn sie die Kante des übergeordneten Elements erreichen.
  • Ein schwebendes Element trifft auf ein bereits schwebendes Element, und das letztere schwebt zum ersteren und hört dann auf zu schweben.
  • Nachdem das schwebende Element schwebt, wird es vom übergeordneten Element getrennt und das übergeordnete Element umschließt das schwebende Element nicht mehr.
  • Wenn Inline-Elemente auf Float gesetzt sind, verfügen sie über die Eigenschaften von Elementen auf Blockebene.

Warum klare Schwimmer?

  • Weil schwebende Elemente Auswirkungen auf die darunter liegenden Elemente haben, werden Sie es verstehen, wenn Sie sich das Diagramm mit den praktischen Ergebnissen ansehen.
  • Unterklassenelemente, deren class .box ist, haben nicht denselben Effekt wie vor dem Schweben.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Float löschen</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
        
       }
       .box2{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
        
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
         
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
  </div>
  <h1>Float löschen</h1>
</body>
</html>

Ergebnisdiagramm

Nachdem das untergeordnete Element des Elements mit dem class .box nach links schwebt, wirkt sich dies auf die Layoutpraxis der folgenden Elemente aus.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schweben</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
         schweben: links;
       }
       .box2{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
         schweben: links;
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
          schweben: links;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
  </div>
  <h1>Float löschen</h1>
</body>
</html>

Ergebnisdiagramm

Jetzt sollte jeder verstehen, warum wir Floats löschen müssen. Wenn Floats vorhanden sind, müssen wir sie löschen, da das Festlegen von Floats für die obigen Elemente das Layout der Elemente darunter beeinflusst.

Es gibt 3 Möglichkeiten, Floats zu löschen

Erste Methode

  • Legen Sie eine feste Höhe für das übergeordnete Element des schwebenden Elements fest, sodass das schwebende Element optisch in das übergeordnete Element eingebettet ist.
  • Wir stellen für das übergeordnete Element des schwebenden Elements eine feste Höhe von 600px ein und sehen uns den Effekt an.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Float löschen</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Höhe: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
         schweben: links;
       }
       .box2{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
         schweben: links;
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
          schweben: links;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
  </div>
  <h1>Float löschen</h1>
</body>
</html>

Ergebnisdiagramm

Dadurch wird das Layoutproblem der folgenden Elemente gelöst, ich empfehle dies jedoch nicht, da die Höhe durch den Inhalt der untergeordneten Elemente unterstützt wird und nicht durch die von uns angegebene feste Höhe.

Zweite Methode

Tatsächlich gibt es in CSS auch eine Eigenschaft zum Löschen von Floats, und diese Eigenschaft heißt „clear“.

Tabelle mit Beschreibungen von Attributwerten löschen

Eigenschaftswert beschreiben
links Löscht das linke schwebende Element.
Rechts Löscht das rechte Float-Element.
beide Löschen Sie links und rechts schwebende Elemente.

  • Um dieses Clear-Attribut zu verwenden, müssen Sie ein neues Div-Element erstellen. Sie können in das neu erstellte div Element keinen Inhalt einfügen. Es kann nur eines tun, nämlich den Float löschen und das neu erstellte div Element hinter das letzte Float-Element setzen, damit es wirksam wird.
  • Ich werde hier nicht die Attributwerte zum Löschen von linken und rechten Floats einzeln üben. Normalerweise verwenden wir einfach both Attributwerte. Warum sollte man sich beim Löschen von linken und rechten Floats darum kümmern, ob es sich um einen linken oder rechten Float handelt? Löschen Sie einfach die linken und ok Floats.
  • Einzelheiten entnehmen Sie bitte den Ergebnissen unserer Praxis.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Float löschen</title>
    <Stil>
       .Kasten{
         Breite: 600px;
         Rand: 1px durchgezogen #000;
       }
       .box1{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #f00;
         schweben: links;
         
       }
       .box2{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #0f0;
         schweben: links;
       }
       .box3{
         Breite: 100px;
         Höhe: 100px;
         Hintergrundfarbe: #00f;
          schweben: links;
       }
       .klar{
         klar: beides;
       }
    </Stil>
</Kopf>
  
<Text>
  <div Klasse="Box">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
    <div Klasse="box3"></div>
    <div Klasse="klar"></div>
  </div>
  <h1>Float löschen</h1>
</body>
</html>

Ergebnisdiagramm

Hinweis: Dies ist, was wir wirklich wollen. Visuell wird das schwebende Element in das übergeordnete Element eingebettet.

Der dritte Weg

  • Um Floats zu löschen, verwenden Sie das overflow -Attribut mit dem Wert hidden . Dieses Attribut muss für das übergeordnete Element des Float-Elements festgelegt werden.
  • Lassen Sie mich Ihnen den overflow und den hidden Attributwert vorstellen. Ursprünglich soll er den übergelaufenen Inhalt verbergen, kann aber auch den Float löschen.
  • Der Autor lässt den Inhalt zuerst überlaufen und verbirgt dann den überlaufenden Inhalt. Schauen wir uns das gemeinsam an.

Codeblöcke

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Überlaufinhalt ist ausgeblendet</title>
    <Stil>
        div{
            Breite: 100px;
            Höhe: 50px;
            Rand: 1px durchgezogen #000;
            
        }
    </Stil>
</Kopf>
<Text>
    <div>
        Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube.
        Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube.
        Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube.
        
    </div>
</body>
</html>

Ergebnisdiagramm

Als nächstes werde ich den überlaufenden Inhalt ausblenden.

Codeblöcke

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Überlaufinhalt ist ausgeblendet</title>
    <Stil>
        div{
            Breite: 100px;
            Höhe: 50px;
            Rand: 1px durchgezogen #000;
            Überlauf: versteckt;
        }
    </Stil>
</Kopf>
<Text>
    <div>
        Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube.
        Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube.
        Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube.
        
    </div>
</body>
</html>

Ergebnisdiagramm

  • Um einen Float zu löschen, verwenden Sie die overflow -Eigenschaft mit dem Wert hidden .
  • Bevor wir die Floats löschen, werfen wir einen Blick auf die Struktur.

Codeblöcke

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Float löschen</title>
    <Stil>
       ul{
           Listenstil: keiner;
          
       }
       ul li{
           schweben: links;
           Rand: 1px durchgehend rot;
       }
    </Stil>
</Kopf>
<Text>
    <ul>
        <li>Lächeln ist der erste Glaube 1</li>
        <li>Lächeln ist der erste Glaube 2</li>
        <li>Lächeln ist der erste Glaube 3</li>
        <li>Lächeln ist der erste Glaube 4</li>
        <li>Lächeln ist der erste Glaube 5</li>
        <li>Lächeln ist der erste Glaube 6</li>
        <li>Lächeln ist der erste Glaube 7</li>
        <li>Lächeln ist der ursprüngliche Glaube 8</li>
    </ul>
</body>
</html>

Ergebnisdiagramm

Hinweis: Hier habe ich die schwebenden Elemente noch nicht gelöscht. Sie können deutlich sehen, dass die Höhe ul -Tags 0 beträgt.

Übung zum Löschen von Floats

Codeblöcke

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Float löschen</title>
    <Stil>
       ul{
           Listenstil: keiner;
           Überlauf: versteckt;
       }
       ul li{
           schweben: links;
           Rand: 1px durchgehend rot;
       }
    </Stil>
</Kopf>
<Text>
    <ul>
        <li>Lächeln ist der erste Glaube 1</li>
        <li>Lächeln ist der erste Glaube 2</li>
        <li>Lächeln ist der erste Glaube 3</li>
        <li>Lächeln ist der erste Glaube 4</li>
        <li>Lächeln ist der erste Glaube 5</li>
        <li>Lächeln ist der erste Glaube 6</li>
        <li>Lächeln ist der erste Glaube 7</li>
        <li>Lächeln ist der ursprüngliche Glaube 8</li>
    </ul>
</body>
</html>

Ergebnisdiagramm

Jetzt können wir deutlich sehen, dass die Höhe des ul -Tags 23px Pixel beträgt. Warum müssen wir verwenden: Das Attribut ist overflow und der Attributwert hidden um den Float zu löschen? Da im ul Tag nur li Tag-Elemente verwendet werden können und keine anderen Elemente verwendet werden können, ist es am besten, das Attribut overflow und den Attributwert hidden , um den Float zu löschen.

Zusammenfassen

Oben ist die vom Editor eingeführte CSS-Methode zum Schweben von Elementen und Löschen von Floats. Ich hoffe, sie ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<:  Einführung in JavaScript-Zahlen- und Mathematikobjekte

>>:  50 wunderschöne FLASH-Website-Designbeispiele

Artikel empfehlen

Linux-Sudo-Sicherheitslücke kann zu unberechtigtem privilegiertem Zugriff führen

Durch Ausnutzen einer neu entdeckten Sudo-Sicherh...

Eine kurze Erklärung zum sinnvollen Einsatz von Tabellen und Divs im Seitendesign

Zu Beginn dieses Artikels möchte ich die Fehler in...

Implementierungsbeispiel eines Videoplayers basierend auf Vue

Wenn der vorhandene Videoplayer die Anforderungen...

Implementierung der IP-Adresskonfiguration in Centos7.5

1. Bevor Sie die IP-Adresse konfigurieren, verwen...

Implementierung von nacos1.3.0, erstellt mit Docker

1. Fortsetzen nacos-Datenbank Datenbankname nacos...

Zusammenfassung der Verzögerungen der MySQL-Slave-Bibliothek „Seconds_Behind_Master“

Inhaltsverzeichnis Zusammenfassung der Verzögerun...

Windows verhindert, dass der Remote-Desktop für längere Zeit automatisch getrennt wird

Jeder, der schon einmal Windows Remote Desktop zu...

WHMCS V7.4.2 Grafisches Installationstutorial

1. Einleitung WHMCS bietet eine Komplettlösung fü...

Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

Inhaltsverzeichnis 1. Datenbankdesign 2. Frontend...

6 Lösungen für Netzwerkfehler im Docker-Container

6 Lösungen für Netzwerkfehler im Docker-Container...

Der gesamte Prozess der lokalen Konfiguration des Reverse-Proxys über Nginx

Vorwort Nginx ist ein leichtgewichtiger HTTP-Serv...

Warum MySQL das Löschen von Daten nicht empfiehlt

Inhaltsverzeichnis Vorwort InnoDB-Speicherarchite...

Einführung in die drei wesentlichen Protokolle für MySQL-Datenbankinterviews

Inhaltsverzeichnis 1. Redo-Log (Transaktionsproto...

Erklären Sie TypeScript-zugeordnete Typen und eine bessere wörtliche Typinferenz.

Inhaltsverzeichnis Überblick Verwenden zugeordnet...

Lernen Sie, benutzerdefinierte Hooks in React zu erstellen

1. Was sind benutzerdefinierte Hooks Wiederverwen...