Zwevende HTML elementen
Elementen kan je laten links of rechts 'zweven' t.o.v. andere elementen waardoor ze afwijken van hun 'natuurlijke plaats in de 'natuurlijke volgorde' (Natuurlijke flow van elementen op een pagina) waarop een browser html elementen weergeeft.
float
De box van een zwevend element wordt langs de linker- of rechterrand van het moederelement geplaatst en de boxen van andere elementen ervoor of erna kunnen hun plek ernaast krijgen.
Met behulp van de float eigenschap in CSS kunnen alle elementen zwevend gemaakt worden. Je moet wel de breedte van het element expliciet vast leggen met de width eigenschap. Een uitzondering voor dat laatste geldt de replaced
elementen, die van zichzelf al een bepaalde breedte hebben.
In het volgende voorbeeld wordt voor een inline element de float eigenschap ingesteld.
De natuurlijke volgorde van de pagina ziet er zo uit:
We laten de afbeelding links zweven van de headings en de paragrafen die erop volgen:
<figure style="float: left">
<img src="images/Stromae.jpg" alt="foto van Stromae"><br>
<figcaption>Standaard 7 september 2014: Showbizznet</figcaption>
</figure>
Je kan de stijlregel ook in het style element van het head element opnemen of in een extern CSS bestand plaatsen.
Stoppen met zweven
clear eigenschap wordt gebruikt om het gedrag van zwevenden elementen te bepalen. Elementen die na een zwevend elementen staan zullen er ook ook naast zweven. Om dit te voorkomen, gebruik je de clear eigenschap.clear eigenschap geeft aan welke zijde van een element zwevende elementen niet mogen zweven:
p.clear {
clear: both;
}
p.clear {
clear: left;
}
p.clear {
clear: right;
}