Wie funktionieren die schwebenden Elemente (floats) in CSS?

float entfernt ein Element aus dem normalen Dokumentenfluss, sodass andere Elemente (meist Text- oder Inline-Elemente) es von der angegebenen Seite (left, right) umfließen lassen können.

Grundprinzipien:

• Entfernung aus dem Fluss: Ein Element mit float nimmt im normalen Fluss des Dokuments keinen Platz ein.
• Umfließen: Nachbarblöckelemente nehmen den Platz des float-Elements nicht ein, und deren Inhalt (Inline-Elemente) umfließt es von der angegebenen Seite.
• Auswirkung auf den Eltern-Container: Die Höhe des Eltern-Containers, der nur float-Elemente enthält, kann kollabieren, wobei ihre Höhe ignoriert wird.
• clear: Die Eigenschaft clear (left, right, both) wird verwendet, um das Umfließen durch nachfolgende Elemente zu verhindern.

Beispiel:

.image {
  float: left; /* Das Bild verschiebt sich nach links */
  margin-right: 10px; /* Rechtsabstand für den Text hinzufügen */
}

.text {
  /* Der Text wird das Bild umfließen */
}

Empfehlungen:

• Die Verwendung von float ist veraltet für komplexe Layouts und wurde durch Flexbox oder Grid ersetzt.
• float kann noch nützlich sein, um einen Umflusseffekt bei Bildern mit Text zu erzielen.
• Um das Kollabieren des Eltern-Containers bei Verwendung von float zu verhindern, werden Techniken wie "clearfix" oder overflow: hidden/auto beim Eltern-Element angewandt.