Ster inactiefSter inactiefSter inactiefSter inactiefSter inactief
 

float is één van die CSS-properties die je soms tot wanhoop drijft. Wat drijft er nou precies waar naar toe en waarom gebeurt dat niet als ik dat aangeef?.

Laten we proberen eens wat zaken op een rijtje te zetten. Allereerst de mogelijke waardes voor float. Dat kunnen de volgende zijn: left, right, none (standaard) of inherit.

Wanneer je de voor een element instelt dat het moet gaan 'floaten', dan gebeurt dat ten opzichte van andere elementen die zich op het zelfde niveau bevinden binnen andere elementen. Ten opzichte van zijn broertjes en zusjes dus.

Het is natuurlijk het beste om dit met wat voorbeelden te laten zien. Als eerste maken we een paragraaf met daarin eerst een afbeelding en daarbij met wat tekst, zonder verder iets in te stellen.

FotoWanneer we niets instellen, dan zal de tekst onder de foto geplaatst worden, omdat het een paragraaf is (block-level element). Dit is het zelfde als float: none; of float: inherit;

FotoWanneer we float: right; instellen, dan wordt het element (de foto) binnen zijn container rechts uitgelijnd.

 

FotoWanneer we float: left; instellen, dan wordt het element (de foto) binnen zijn container links uitgelijnd.

 

We zien dat de afbeelding hoger is dan de tekst en daarniet meer geheel binnen de kaders van de paragraaf valt. Om hier toch een volledig blok van te maken, passen we een kleine fix toe: class="clearfix" met de volgende CSS-code: .clearfix::after { content: ""; clear: both; display: table; }.

FotoDe paragraaf heeft class="clearfix" gekregen.