A Clearfix tulajdonság használata automatikusan beállíthatja a szülőelemet a gyermek elemnek megfelelően, és kijavíthatja a HTML-kódban lévő problémákat néhány attribútum segítségével, mint például ' túlcsordulás ”, amely további jelölések nélkül szabályozza a szülő- és gyermekelemek méreteit.
A Clearfix tulajdonság használata
Ismerjük meg a clearfix tulajdonság használatát, hogy megtudjuk, mit csinál a kimenettel, ha hozzáadunk egy CSS clearfix tulajdonságot egy HTML kódrészlethez:
Clearfix tulajdonság nélkül
Futtassunk le egy kódrészletet a clearfix tulajdonság végrehajtása nélkül, hogy megértsük, milyen problémákat tud megoldani a clearfix:
Hozzon létre egy osztályt HTML-ben, amely beszúr egy képet egy div tárolóba:
< div osztály = 'egyértelműsítés' >
< br >< img osztály = 'img' src = 'image.png' minden = 'kép' szélesség = '250' magasság = '180' >
Szöveg...
< / div >
Íme a fenti HTML CSS-kódja:
.clearfix {
határ : 3 képpont szilárd #2baa12 ;
párnázás : 5 képpont ;
}
.img {
úszó : bal ;
}
>
Ez úgy hozza létre a kimenetet, hogy a képet tartalmazó gyermekosztály túlcsordul a tárolón kívül. Az ehhez hasonló helyzetekben az egyértelmű javítás tulajdonság használható a probléma egyszerű elhárítására vagy javítására:
Clearfix tulajdonsággal
A probléma megoldásához egyszerűen hozzáadhatunk egy túlcsordulás attribútum, amelynek értéke egyenlő auto amely beállítja a szülőtárolót a gyermekelem méretének megfelelően:
.clearfix {
határ : 3 képpont szilárd #2baa12 ;
párnázás : 5 képpont ;
}
.clearfix {
túlcsordulás : auto ;
}
.img {
úszó : bal ;
}
>
Ebben a kódrészletben a szülőosztály a tároló, és a kép be van szúrva a gyermekosztályába:
< div osztály = 'egyértelműsítés' >< br >< img osztály = 'img' src = 'image.png' minden = 'kép' szélesség = '250' magasság = '180' >
Szöveg...
< / div >
Egy clearfix tulajdonság hozzáadása automatikusan kibontja a szülőelemet (tárolót) a beillesztett gyermek elem méretének megfelelően:
Így működik a Clearfix tulajdonság a HTML-ben.
Következtetés
Egy clearfix tulajdonság a HTML gyermekelemeinek a szülőelemek szerinti beállítására szolgál egy egyszerű clearfix tulajdonsággal, további jelölések nélkül. A CSS Clearfix használata növeli vagy csökkenti a szülőelemek méreteit, hogy a gyermekelemek méreteihez igazítsa őket.