Wat is een HTML-float?

Een van de meest gebruikte HTML-tags (HyperText Markup Language) en CSS-codes (cascading style sheets) voor het beheren van de lay-out van een pagina is de float-tag. Wanneer een CSS- en HTML-float-tag op een element wordt toegepast, zweeft dat deel van de pagina naar links of naar rechts. Het zorgt er ook voor dat andere elementen, zoals tekst, eromheen stromen.

De HTML-float, wat eigenlijk een CSS-tag is die op een HTML-element wordt toegepast, is een eigenschap die vaak door webontwerpers wordt gebruikt om verschillende paginalay-outs te bereiken. Wanneer een HTML-float-eigenschap wordt toegepast op een element op een pagina, zoals een afbeelding of een deel van de sitestructuur, wordt het element verwijderd uit de normale "stroom" van de pagina en naar links of naar rechts verplaatst. Dit geeft de webdesigner meer controle over waar elementen op een pagina verschijnen.

Een van de meest voorkomende toepassingen voor de CSS- en HTML-float-tag is het verplaatsen van een afbeelding naar links of rechts van de pagina. Wanneer een afbeelding bijvoorbeeld naar rechts zweeft, wordt deze naar de rechterkant van het bevattende element verplaatst. Tekst op de pagina loopt ook rond een zwevende afbeelding.

Er zijn verschillende eigenschappen van een HTML-float-tag die het effect op een HTML-element wijzigen. Afgezien van zweven naar links of rechts, kan de webdesigner bijvoorbeeld de HTML float-tag opgeven als "erven". Dit betekent dat de tag de float-eigenschap van het bevattende element erft. Als een afbeelding bijvoorbeeld in een vak wordt geplaatst dat links van een pagina wordt weergegeven, zorgt de erftag ervoor dat de afbeelding ook naar links wordt verplaatst.

Een nuttige eigenschap die vaak wordt gebruikt in combinatie met een float-tag is de clear-tag. Dit bepaalt hoe elementen na een float-tag worden weergegeven. Als een afbeelding bijvoorbeeld naar links zweeft, maar de tekst eronder is voorzien van een duidelijke tag, dan verschijnt de tekst altijd onder de afbeelding in plaats van ernaast.

Toen de CSS- en HTML-float-tag voor het eerst werd geïntroduceerd, werd deze niet door alle browsers ondersteund. Vanaf 2011 ondersteunen echter alle belangrijke browsers de float-tag. Dit betekent dat een webontwerper de tag in theorie kan gebruiken zonder zich zorgen te maken of deze er anders uit zal zien, afhankelijk van de browser van waaruit de gebruiker de website bekijkt.