Wat zijn float-elementen in CSS?

Float-elementen in CSS zijn een eigenschap waarmee je een element uit de normale stroom van het document kunt halen en links of rechts van de container kunt plaatsen. Aangrenzende elementen en tekst zullen dit float-element omringen.

Belangrijkste waarden van de eigenschap float:

• left: Het element zweeft links.
• right: Het element zweeft rechts.
• none: Het element blijft in de normale stroom (standaardwaarde).
• inherit: Erft de waarde van de ouder.

Voorbeelden van gebruik:

.float-left {
  float: left; /* Het element zweeft links */
  margin-right: 10px; /* Voegt marge toe aan de rechterkant voor tekst */
}

.float-right {
  float: right; /* Het element zweeft rechts */
  margin-left: 10px; /* Voegt marge toe aan de linkerkant voor tekst */
}

Kenmerken van gedrag:

• Het float-element wordt uit de standaard stroom van het document gehaald, maar beïnvloedt de positionering van aangrenzende elementen en tekst.
• De ouder van het float-element kan 'inzakken', omdat float-children niet de hoogte ervan beïnvloeden in de normale stroom. Om dit te voorkomen, worden technieken zoals clear of andere gebruikt, bijvoorbeeld overflow: hidden of Flexbox/Grid.
• De eigenschap clear geeft aan aan welke zijde float-elementen niet mogen staan:

  .clear-left {
    clear: left; /* Het element wordt onder elk float-element aan de linkerkant geplaatst */
  }
  
  .clear-right {
    clear: right; /* Het element wordt onder elk float-element aan de rechterkant geplaatst */
  }
  
  .clear-both {
    clear: both; /* Het element wordt onder alle float-elementen geplaatst */
  }
  

Historisch werden float-elementen gebruikt om multi-kolom lay-outs te maken, maar tegenwoordig is het gebruik van Flexbox of CSS Grid aan te raden vanwege hun grotere flexibiliteit en voorspelbaarheid. Float blijft echter nuttig voor het omringen van tekst rond afbeeldingen of andere elementen.