CSS Float
Met de float eigenschap kan een element zwevend worden gemaakt.float: left;
float: right;
CSS float eigenschap
De eigenschap float wordt gebruikt voor het positioneren van de inhoud, b.v. een afbeelding links van de tekst te laten zweven. Met de waarden left of right wordt de box van een zwevend element naar links, respectievelijk naar rechts verplaatst tot de margin, border of padding van een ander element op blokniveau is bereikt.
| left | - | Het element zweeft links van de container. |
| right | - | Het element zweeft rechts van de container. |
| none | - | Verwijdert de eigenschap float van een element (standaard). |
| inherit | - | Het element erft de float-waarde van het bovenliggende element. |
CSS float: right;
Het volgende voorbeeld laat zien dat de afbeelding rechts van de tekst moet zweven.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
CSS float: left;
Het volgende voorbeeld laat zien dat de afbeelding links van de tekst moet zweven.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
 |
Onthoud dat een element alleen naar links of rechts kan zweven en niet omhoog of omlaag. |
CSS float: none;
In het volgende voorbeeld wordt de afbeelding weergegeven op de eerste regel waar de tekst begint.
CSS elementen naast elkaar laten zweven
Normaal gesproken worden div elementen onder elkaar weergegeven. Als we echter float: left; gebruiken kunnen we elementen naast elkaar laten zweven.
|
De box van een zwevend element wordt compleet weergegeven, inclusief paddings, borders en margins. De margins van een zwevend element en aangrenzende elementen schuiven niet in elkaar. |
CSS float uitschakelen met de clear eigenschap
Als we de float eigenschap gebruiken, en we willen het volgende element eronder plaatsen dus niet links of rechts ervan, dan zullen we de clear eigenschap moeten gebruiken. De eigenschap clear specificeert wat er moet gebeuren met het element dat zich naast een zwevend element bevindt.
| none | - | Het element wordt niet links, rechts of onder de zwevende elementen geplaatst (standaard). |
| left | - | Het element wordt onder links zwevende elementen geplaatst. |
| right | - | Het element wordt onder rechts zwevende elementen geplaatst. |
| both | - | Het element wordt onder zowel links als rechts zwevende elementen geplaatst. |
| inherit | - | Het element erft de clear-waarde van het bovenliggende element. |
Voorbeeld:
.div1 {
float: left;
padding: 10px;
border: 3px solid #73AD21;
}
.div2 {
padding: 10px;
border: 3px solid red;
}
CSS clearfix hack
Als een zwevend element groter is dan de elementen links of rechts ervan dan kan het voorkomen dat het niet goed wordt weergegeven. We kunnen dan een clearfix-hack aan toevoegen om dit probleem op te lossen.
Zonder Clearfix
Met Clearfix
De overflow: auto; clearfix werkt goed zolang je controle hebt over je marges en opvulling anders zie je misschien schuifbalken. De nieuwe, moderne clearfix-hack is echter nog veiliger in gebruik.
