Over float, clear en inline-box

Als je wilt dat een element, bijvoorbeeld een plaatje, rechts uitgelijnd op de pagina staat, gebruik je de CSS-eigenschap float:right. De tekst vloeit netjes om dit element heen. Met behulp van margin kun je wat witruimte om het element maken. De rechthoek (voorbeeld 1) hiernaast is gepositioneerd met onderstaande CSS code:
float:right; margin:0 0 5px 30px;
Hier onder zie je een rode rechthoek (voorbeeld 2). Die is gepositioneerd met:
float:left; margin:10px 30px 10px 0;
Net als bij Voorbeeld 1 vloeit de tekst hier netjes omheen.

Nu kan het voorkomen dat je een element rechts of links wilt positioneren, maar dat de tekst er niet omheen vloeit. Daarvoor heb je de CSS-eigenschap clear. Daarmee stel je in aan welke kant van het element de content niet om een ander element mag vloeien. De paragraaf met deze tekst heeft class="clear", waarvan de CSS luidt:
clear:left;
Merk op dat de tekst van deze paragraaf niet om de rode rechthoek vloeit, zoals je zou verwachten met float:left. De tekst begint onder de rode rechthoek, of nauwkeuriger gezegd, tegen de linker marge van het document. Dat komt door de clear-opdracht in CSS.

Voor de duidelijkheid: Het element dat clear heeft, volgt direct op het element dat float heeft. Dat is lastig, zeker als de lay-out van je webdocument nog niet helemaal vast ligt. De aanpak met float en clear is dan ook –terecht– onderhevig aan kritiek en er zal vroeg of laat wel een oplossing voor worden bedacht.

Voor de aanpak met float:left en clear:left bestaat een alternatief, dat door alle grote browsers breed wordt ondersteund. Vervang float:left; door display:inline-block;. De CSS-eigenschap clear in het volgende element kun je dan weglaten.
Dit werkt (nog?) niet als je float:right gebruikt!

Voor de eigenschappen float en clear is een aantal waarden mogelijk, zie onderstaand overzicht:

Naam		Betekenis
float:none		Dit is de default-waarde. Als je geen float opgeeft, gedraagt het element zichzelf als elk ander element voor wat betreft de plaatsing.
float:left		Het element wordt tegen de linker marge van het document geplaatst. Met margin kun je witruimte maken om het element. Als het floating element breder is dan het element waarin het moet floaten, kun je dat oplossen met de CSS-eigenschappen overflow, overflowx en/of overflowy.
float:right		Het element wordt tegen de rechter marge van het document geplaatst. Met margin kun je witruimte maken om het element. Als het floating element breder is dan het element waarin het moet floaten, kun je dat oplossen met de CSS-eigenschappen overflow, overflowx en/of overflowy.
clear:none		Dit is de default-waarde. Als je geen clear opgeeft, kunnen er zowel links als rechts van het element floating elementen staan.
clear:left		Floating elementen aan de linker kant van het element zijn niet toegestaan.
clear:right		Floating elementen aan de rechter kant van het element zijn niet toegestaan.
clear:both		Floating elementen aan beide zijden van het element zijn niet toegestaan. Dit is dus precies het tegengestelde van clear:none.