Detaillierte Erläuterung der Floating-Funktion von html

Detaillierte Erläuterung der Floating-Funktion von HTML

2024-07-12

„Float“ in HTML ist eine CSS-Layout-Technologie, die ursprünglich dafür entwickelt wurde, dass Text Bilder umschließt oder einfache Layout-Effekte erzielt, wie etwa das Anordnen von Elementen nebeneinander. Mit der Weiterentwicklung der Webentwicklung wurden Floats jedoch auch häufig in komplexeren Seitenlayoutdesigns verwendet, obwohl modernes CSS fortgeschrittenere Layoutmethoden bereitstellt (wie Flexbox und Grid).

Die Grundfunktion des Floatings

Textumbruch : Dies ist die originellste und intuitivste Anwendung von Floats. Wenn ein Bild (oder ein anderes Element auf Blockebene) auf schwebend eingestellt ist, fließt der umgebende Text um das Bild herum, anstatt mit dem normalen Dokumentfluss fortzufahren (von oben nach unten, von links nach rechts).
nebeneinander angeordnet : Indem Sie Floats für mehrere Elemente festlegen, können Sie diese standardmäßig nebeneinander statt gestapelt anordnen. Dies ist nützlich, wenn Sie Navigationsleisten, Bildergalerien oder andere Layouts erstellen, bei denen Elemente horizontal angeordnet werden müssen.

So verwenden Sie Float

CSS-Eigenschaften:passierenfloat Eigenschaften für Float-Elemente.Diese Eigenschaft kann mehrere Werte annehmen, darunterleft、right、none(Standard, d. h. kein Float) undinherit(Vom übergeordneten Element geerbtfloatWert).
Beispiel：


<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    .float-left {  
      float: left;  
      width: 50%;  
    }  
    .float-right {  
      float: right;  
      width: 50%;  
    }  
  </style>  
</head>  
<body>  
 
<div class="float-left">左边的内容</div>  
<div class="float-right">右边的内容</div>  
 
</body>  
</html>

In diesem Beispiel zwei<div>Elemente werden über gesetztfloat: left;Undfloat: right;Side-by-Side-Layout implementiert.
schwebender Effekt
Brechen Sie aus dem Dokumentenfluss aus: Schwebende Elemente werden aus dem normalen Dokumentfluss entfernt, was bedeutet, dass sie nicht mehr den Platz einnehmen, den sie ursprünglich eingenommen haben, und andere nicht schwebende Elemente ignorieren ihre Anwesenheit und füllen die Lücken, die sie hinterlassen.
Wirkung auf nachfolgende Elemente: Nicht schwebende Elemente, die einem schwebenden Element folgen, versuchen, den vom schwebenden Element hinterlassenen Raum zu füllen, aber das schwebende Element selbst deckt nicht den Inhalt oder die Ränder des nachfolgenden Elements ab.
klarer Schwimmer: Um die unvorhersehbaren Auswirkungen des Floatings auf das nachfolgende Layout zu vermeiden, ist es normalerweise erforderlich, die Methode zum Löschen des Floatings zu verwenden, z. B. usingclear: both;Attribute, das Löschen von Pseudoelementen oder das Erstellen eines neuen Formatierungskontexts auf Blockebene (z. B. usingoverflow: auto;oderdisplay: flex;）。

Zusammenfassen

Obwohl Floats eine der wichtigsten Layouttechniken in der Webentwicklung sind, bringen sie auch einige Komplexitäten und Einschränkungen mit sich. Mit dem Aufkommen moderner CSS-Layout-Technologien wie Flexbox und Grid hat die Verwendung von Floats in komplexen Layouts allmählich abgenommen, aber in einigen einfachen Szenarien oder Projekten, die eine Abwärtskompatibilität mit alten Browsern erfordern, sind Floats immer noch ein nützliches Werkzeug.

Wir werden auch in Zukunft relevante Inhalte aktualisieren und teilen.Denken Sie daran, aufmerksam zu sein!

Technologieaustausch