Was sind float-Elemente in CSS?

Float-Elemente in CSS sind eine Eigenschaft, die es ermöglicht, ein Element aus dem normalen Dokumentenfluss zu entfernen und es links oder rechts seines Containers zu positionieren. Nachbar-Elemente und Text werden dieses floatende Element umfließen.

Hauptwerte der Eigenschaft float:

• left: Das Element schwimmt links.
• right: Das Element schwimmt rechts.
• none: Das Element verbleibt im normalen Fluss (Standardwert).
• inherit: Erbt den Wert vom Elternelement.

Anwendungsbeispiele:

.float-left {
  float: left; /* Das Element wird links schweben */
  margin-right: 10px; /* Fügt einen rechten Abstand für den Text hinzu */
}

.float-right {
  float: right; /* Das Element wird rechts schweben */
  margin-left: 10px; /* Fügt einen linken Abstand für den Text hinzu */
}

Verhaltensmerkmale:

• Das floatende Element wird aus dem Standardfluss des Dokuments entfernt, beeinflusst aber die Anordnung der Nachbar-Elemente und des Textes.
• Das Elternelement des floatenden Elements kann "zusammenfallen", da floatende Kinder seine Höhe im normalen Fluss nicht beeinflussen. Um dies zu verhindern, verwendet man Techniken wie clear oder andere, z.B. overflow: hidden oder Flexbox/Grid.
• Die Eigenschaft clear gibt an, auf welcher Seite keine floatenden Elemente sein dürfen:

  .clear-left {
    clear: left; /* Das Element wird unter jedem linken floatenden Element positioniert */
  }
  
  .clear-right {
    clear: right; /* Das Element wird unter jedem rechten floatenden Element positioniert */
  }
  
  .clear-both {
    clear: both; /* Das Element wird unter allen floatenden Elementen positioniert */
  }
  

Historisch wurden floatende Elemente verwendet, um mehrspaltige Layouts zu erstellen, aber heute sind Flexbox und CSS Grid aufgrund ihrer besseren Flexibilität und Vorhersagbarkeit vorzuziehen. Float ist jedoch weiterhin nützlich, um Text um Bilder oder andere Elemente zu fließen.