Hoe werken zwevende elementen (floats) in CSS…

De zwevende elementen (floats) in CSS worden uit de normale stroom van het document gehaald en verschuiven in de aangegeven richting (links of rechts) binnen hun containerelement. Inline naastliggende elementen en inhoud beginnen de zwevende element te omringen vanaf de tegenovergestelde zijde.

Belangrijkste eigenschappen van float:

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

Ze werden vaak gebruikt om multi-column lay-outs te maken voordat Flexbox en Grid verschenen.

Gedragskenmerken:

Het zwevende element wordt een blok, ongeacht het oorspronkelijke display-type.
De hoogte van de bovenliggende container houdt geen rekening met de hoogte van het zwevende element, wat kan leiden tot een "instorting" van de container. Om dit op te lossen, worden clearing-methoden gebruikt.

Clearing-methoden:

clear eigenschap: Wordt toegepast op een element om te voorkomen dat het wordt omgeven door zwevende elementen. Waarden: left, right, both, none, inherit.
```
/* Het element zal niet worden omgeven door zwevende elementen aan beide zijden */
.clear-both {
  clear: both;
}
```
Clearfix-techniek: Toevoegen van een pseudo-element :after aan de bovenliggende container met clear: both en andere stijlen om instorting te voorkomen.
```
/* klassieke clearfix */
.clearfix::after {
  content: "";
  display: table; /* of "block" */
  clear: both;
}
```

Ondanks de opkomst van modernere lay-outmethoden, kan float nog steeds nuttig zijn voor kleine elementen, bijvoorbeeld om een afbeelding binnen tekst te plaatsen.

Hoe werken zwevende elementen (floats) in CSS?