CSS -uitleg - duidelik en duidelik
Die duidelike Eiendom
Wanneer ons die floateiendom gebruik, en ons wil die volgende element hieronder hê (nie regs of links nie), sal ons die clear
eiendom moet gebruik.
Die cleareienskap spesifiseer wat moet gebeur met die element wat langs 'n drywende element is.
Die cleareiendom kan een van die volgende waardes hê:
-
none- Die element word nie onder links of regs gesweefde elemente gedruk nie. Dit is verstek -
left- Die element word onder links gesweefde elemente gedruk -
right- Die element word onder regs drywende elemente gedruk -
both- Die element word onder beide links en regs gesweefde elemente gedruk -
inherit- Die element erf die duidelike waarde van sy ouer
Wanneer jy dryf skoon maak, moet jy die helder by die dryf pas: As 'n element na links dryf, moet jy na links dryf. Jou gesweefde element sal aanhou dryf, maar die skoongemaakte element sal onder dit op die webblad verskyn.
Voorbeeld
Hierdie voorbeeld maak die vlotter na links skoon. Hier beteken dit dat die <div2>-element onder die linker geswewe <div1>-element gedruk word:
div1 {
float: left;
}
div2 {
clear: left;
}
Die duidelike oplossing Hack
As 'n drywende element hoër is as die element wat bevat, sal dit buite sy houer "oorloop". Ons kan dan 'n clearfix-hack byvoeg om hierdie probleem op te los:
Sonder 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.