CSS -lay-out - zwevend en duidelijk
De CSS- floateigenschap specificeert hoe een element moet zweven.
De CSS clear-eigenschap specificeert welke elementen naast het gewiste element kunnen zweven en aan welke kant.
De vlotterwoning
De floateigenschap wordt gebruikt voor het positioneren en opmaken van inhoud, bijvoorbeeld om een afbeelding links van de tekst in een container te laten zweven.
De floateigenschap kan een van de volgende waarden hebben:
-
left- Het element zweeft links van zijn container -
right- Het element zweeft rechts van zijn container -
none- Het element zweeft niet (wordt weergegeven waar het in de tekst voorkomt). Dit is standaard -
inherit- Het element erft de float-waarde van zijn ouder
In het eenvoudigste gebruik kan de floateigenschap worden gebruikt om tekst rond afbeeldingen te laten lopen.
Voorbeeld - float: rechts;
In het volgende voorbeeld wordt aangegeven dat een afbeelding in een tekst naar rechts moet zweven :
De pijn zelf is liefde, het belangrijkste opslagsysteem. Phasellus imperdiet, nee en er werd wel eens gezegd, maar het gebrek aan haat Maecenas is fans, wraakzuchtig en niet kokend, de auteur van het massaleven.
Voorbeeld
img {
float: right;
}
Voorbeeld - zwevend: links;
In het volgende voorbeeld wordt aangegeven dat een afbeelding in een tekst naar links moet zweven :
De pijn zelf is liefde, het belangrijkste opslagsysteem. Phasellus imperdiet, nee en er werd wel eens gezegd, maar het gebrek aan haat Maecenas is fans, wraakzuchtig en niet kokend, de auteur van het massaleven.
Voorbeeld
img {
float: left;
}
Voorbeeld - Geen float
In het volgende voorbeeld wordt de afbeelding weergegeven waar deze in de tekst voorkomt (float: none;):
De pijn zelf is liefde, het belangrijkste opslagsysteem. Phasellus imperdiet, nee en er werd wel eens gezegd, maar het gebrek aan haat Maecenas is fans, wraakzuchtig en niet kokend, de auteur van het massaleven.
Voorbeeld
img {
float: none;
}
Voorbeeld - Naast elkaar drijven
Normaal gesproken worden div-elementen boven elkaar weergegeven. Als we echter gebruiken float: left, kunnen we elementen naast elkaar laten zweven:
Voorbeeld
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}