Was sind schwebende Elemente (floats) in CSS?

Float in CSS ist eine Eigenschaft, die es einem Element ermöglicht, nach links oder rechts vom umgebenden Inhalt "zu schwimmen".

Hauptmerkmale:

• Verschiebung: Das Element mit der angewendeten float-Eigenschaft verschiebt sich an den linken oder rechten Rand seines Elternelements (oder eines anderen float-Elements).
• Umfließen: Der normale Block- oder Inline-Inhalt (Text, Bilder) umfließt das float-Element.
• Flusskontext: Float-Elemente werden teilweise aus dem normalen Dokumentenfluss herausgenommen, beeinflussen aber die Positionierung anderer Elemente.
• Anwendung: Ursprünglich verwendet, um Spalten zu organisieren oder Bilder mit Text darum herum anzuordnen. In modernem Layout werden häufiger Flexbox oder Grid verwendet.

Typische Werte der Eigenschaft float:

• left: Das Element schwimmt nach links.
• right: Das Element schwimmt nach rechts.
• none: Das Element schwimmt nicht (Standardwert).
• inherit: Erbt den Wert vom Elternelement.
• initial: Setzt den Standardwert.

Probleme mit float:

• Elternelement kollabiert: Das Elternelement, das nur float-Elemente enthält, kann in der Höhe kollabieren.
• Reinigung: Um das Umfließen durch nachfolgende Elemente zu verhindern, sollte die Eigenschaft clear verwendet werden.

.image-float {
  float: left; /* Das Bild schwimmt links */
  margin-right: 10px; /* Rand rechts vom Bild */
}

.text-content {
  /* Dieser Text wird das Bild umfließen */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Reinigung des Flusses nach float-Elementen */
}