Wat zijn zwevende elementen (floats) in CSS?

Float in CSS is een eigenschap die het mogelijk maakt dat een element "drijft" naar links of rechts van de inhoud eromheen.

Belangrijkste kenmerken:

• Verplaatsing: Het element met de toegepaste float-eigenschap verschuift naar de linker- of rechterrand van zijn oudercontainer (of een ander float-element).
• Omwikkeling: De normale blok- of inline-inhoud (tekst, afbeeldingen) omringt het float-element.
• Flow-omgeving: Float-elementen worden gedeeltelijk uit de normale stroom van het document gehaald, maar beïnvloeden de positionering van andere elementen.
• Toepassing: Oorspronkelijk gebruikt voor het organiseren van kolommen of het plaatsen van afbeeldingen met tekst eromheen. In modern ontwerp worden vaker Flexbox of Grid gebruikt.

Typische waarden van de eigenschap float:

• left: Het element drijft naar links.
• right: Het element drijft naar rechts.
• none: Het element drijft niet (standaardwaarde).
• inherit: Erft de waarde van de ouder.
• initial: Stelt de standaardwaarde in.

Problemen met float:

• Inzakking van de ouder: De oudercontainer die alleen float-elementen bevat, kan in hoogte inzakken.
• Schoonmaken: Om te voorkomen dat volgende elementen de float-elementen omringen, moet de eigenschap clear worden gebruikt.

.image-float {
  float: left; /* De afbeelding drijft links */
  margin-right: 10px; /* Ruimte rechts van de afbeelding */
}

.text-content {
  /* Deze tekst zal de afbeelding omringen */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Schoonmaak na float-elementen */
}