Hoe werken zwevende elementen (floats) in CSS?

float verwijdert een element uit de normale stroom van het document, waardoor andere elementen (meestal tekst of inline) het element kunnen omringen vanaf de zijde die is aangegeven in de eigenschap (left, right).

Basisprincipes:

• Verwijdering uit de stroom: Een element met float neemt geen ruimte in in de normale stroom van het document.
• Omringing: Aangrenzende blokelementen zullen niet de ruimte van het float-element innemen, en hun inhoud (inline-elementen) zal het omringen vanaf de aangegeven zijde.
• Invloed op de ouder: De hoogte van de oudercontainer, die alleen float-elementen bevat, kan instorten, waarbij hun hoogte wordt genegeerd.
• clear: De eigenschap clear (left, right, both) wordt gebruikt om te voorkomen dat elementen die na het float-element komen, het omringen.

Voorbeeld:

.image {
  float: left; /* Het beeld verschuift naar links */
  margin-right: 10px; /* Voeg marge rechts toe voor de tekst */
}

.text {
  /* De tekst zal het beeld omringen */
}

Aanbevelingen:

• Het gebruik van float is verouderd voor het maken van complexe lay-outs en is vervangen door Flexbox of Grid.
• float kan nog steeds nuttig zijn voor het creëren van een omringend effect van afbeeldingen met tekst.
• Om te voorkomen dat de oudercontainer instort bij gebruik van float, worden technieken zoals "clearfix" of overflow: hidden/auto toegepast op de ouder.