Websites met stijl
Naslag: float en clear
Op dit naslagblad
De eigenschap float
De eigenschap float bepaalt of een element zweeft. (Tekst of andere elementen gaan er omheen).
Voorbeelden
In het linker kader een gele rechthoek met float: left en een met float: right
In het rechter kader een gele rechthoek zonder float.
Zonder float loopt de tekst niet om een afbeelding heen. Zonder float loopt de tekst niet om een afbeelding heen.
Vorm
Waarden
| none | het element zweeft niet (standaard) |
| left | het element zweeft links Tekst gaat er rechts omheen. |
| right | het element zweeft rechts Tekst gaat er links omheen. |
| initial | standaard waarde |
| inherit | Erft de waarde van de parent. |
Standaard waarde, vererving
| standaard | none |
| vererft | nee |
Opmerkingen
- Float werkt niet bij absoluut gepositioneerde elementen.
- Vroeger werd float vaak gebruikt om verschillende blok-elementen achter elkaar op een regel te plaatsen.
Zie blok-elementen met float op een regel verderop in dit hoofdstuk.
Meestal kan men daar gemakkelijker de nieuwe declaratie display: inline-block voor gebruiken. - Een blok-element met de eigenschap float verliest enkele blokeigenschappen. Zo neemt het element niet meer de hele breedte in beslag.
- Float is de geëigende manier om tekst om een element heen te laten lopen.
- Zie de eigenschap clear (hieronder) om naar de onderkant van een float-element te gaan, bijvoorbeeld voor een nieuw hoofdstuk dat je niet naast een afbeelding wilt laten beginnen.
De eigenschap clear
De eigenschap clear bepaalt aan welke kant van dat element GEEN float-element mag staan.
Het effect ervan is dat het element onder het float-element wordt geplaatst.
Zie de voorbeelden.
Vorm
Waarden
| none | Clear staat uitgeschakeld (standaard) |
| left | Het element mag NIET naast een element met float: left staan. |
| right | Het element mag NIET naast een element met float: right staan. |
| both | Het element mag NIET naast een element met float: left of float: right staan. |
| initial | standaard waarde |
| inherit | Erft de waarde van de parent. |
Standaard waarde, vererving
| standaard | none |
| vererft | nee |
Voorbeelden
Clear: left
Deze alinea heeft de eigenschap clear: left;.
Deze alinea heeft de eigenschap clear: left.
Clear: right
Deze alinea heeft de eigenschap clear: right.
Deze alinea heeft de eigenschap clear: right.
Clear: both
Deze alinea heeft de eigenschap clear: both;.
Deze alinea heeft de eigenschap clear: both.
Clear: none;
Deze alinea heeft de eigenschap clear: none;.
Deze alinea heeft de eigenschap clear: none.
Toepassingen van clear
Vaak wil men een nieuwe sectie niet naast een afbeelding laat beginnen. Zo'n kop geeft men dan de eigenschap
Blok-elementen op een regel
De eigenschap float kan ook gebruikt worden om een aantal blok-elementen achter elkaar op een regel te plaatsen.
Dat kan ook met de eigenschap display: inline-block
Bekijk de mogelijkheden in de figuren 1-4.
Blokjes - float: left;
fig 1 - float: left;
Blokjes - float: left; alinea: clear: both;
fig 2 - float: left
Blokjes - float:right;
fig 3 - float: right;
Blokjes - display: inline-block
fig 4 - display: inline-block;
Opmerkingen:
- Let op de volgorde van de blokjes in figuur 3 (float: right;).
- Als de blokjes achter elkaar gezet worden met float: left/right komt de tekst naast de blokjes. (figuur 1 en 3).
Alleen als de alinea de eigenschap clear: both; heeft komt de tekst onder de blokjes (figuur 2). - Bij de met display: inline-block uitgelijnde blokjes (figuur 4) komt de tekst gewoon onder de blokjes. Hier is geen clear: both eigeschap nodig.