CSS -lay-out - clear en clearfix
De duidelijke eigenschap
Wanneer we de floateigenschap gebruiken, en we willen het volgende element hieronder (niet rechts of links), zullen we de clear
eigenschap moeten gebruiken.
De cleareigenschap specificeert wat er moet gebeuren met het element dat zich naast een zwevend element bevindt.
De cleareigenschap kan een van de volgende waarden hebben:
-
none- Het element wordt niet onder links of rechts zwevende elementen geduwd. Dit is standaard -
left- Het element wordt onder links zwevende elementen geduwd -
right- Het element wordt onder rechts zwevende elementen geduwd -
both- Het element wordt onder zowel links als rechts zwevende elementen geduwd -
inherit- Het element erft de duidelijke waarde van zijn ouder
Als je floats opruimt, moet je de clear afstemmen op de float: als een element naar links zweeft, moet je naar links wissen. Uw zwevende element blijft zweven, maar het gewiste element verschijnt eronder op de webpagina.
Voorbeeld
In dit voorbeeld wordt de vlotter naar links gewist. Hier betekent dit dat het <div2>-element onder het links zwevende <div1>-element wordt geschoven:
div1 {
float: left;
}
div2 {
clear: left;
}
De clearfix-hack
Als een drijvend element groter is dan het bevattende element, zal het buiten zijn container "overlopen". We kunnen dan een clearfix-hack toevoegen om dit probleem op te lossen:
Zonder Clearfix
Met Clearfix
Voorbeeld
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after pseudo-element in a later chapter.