Použití vlastnosti Clearfix může automaticky upravit rodičovský prvek podle podřízeného prvku a opravit problémy v kódu HTML pomocí některých atributů, jako je „ přetékat ”, která řídí rozměry nadřazených a podřízených prvků bez nutnosti dalších označení.
Použití vlastnosti Clearfix
Pojďme pochopit použití vlastnosti clearfix, abychom věděli, co dělá s výstupem přidáním vlastnosti CSS clearfix do fragmentu kódu HTML:
Bez vlastnosti Clearfix
Spusťte úryvek kódu bez spuštění vlastnosti clearfix, abychom pochopili, jaké problémy je clearfix schopen vyřešit:
Vytvořte třídu v HTML, která vloží obrázek do kontejneru div:
< div třída = 'clearfix' >
< br < img třída = 'img' src = 'image.png' všechno = 'obraz' šířka = '250' výška = '180' >
Text...
< / div >
Níže je uveden CSS kód pro výše uvedený HTML:
.clearfix {
okraj : 3px pevný #2baa12 ;
vycpávka : 5px ;
}
.img {
plovák : vlevo, odjet ;
}
>
To vygeneruje výstup takovým způsobem, že podřízená třída, která obsahuje obrázek, přeteče mimo kontejner. V situacích, jako je tato, lze vlastnost clear fix použít ke snadnému odstranění nebo vyřešení tohoto problému:
S vlastností Clearfix
K vyřešení problému můžeme jednoduše přidat přetékat atribut s hodnotou rovnou auto který upraví nadřazený kontejner podle velikosti podřízeného prvku:
.clearfix {
okraj : 3px pevný #2baa12 ;
vycpávka : 5px ;
}
.clearfix {
přetékat : auto ;
}
.img {
plovák : vlevo, odjet ;
}
>
Zde v tomto fragmentu kódu je nadřazená třída kontejner a obrázek je vložen do své podřízené třídy:
< div třída = 'clearfix' >< br < img třída = 'img' src = 'image.png' všechno = 'obraz' šířka = '250' výška = '180' >
Text...
< / div >
Přidání vlastnosti clearfix automaticky rozšíří nadřazený prvek (kontejner) podle velikosti podřízeného prvku, kterým je vložený obrázek:
Takto funguje vlastnost Clearfix v HTML.
Závěr
Vlastnost clearfix se používá k úpravě podřízených prvků v HTML podle nadřazených prvků pomocí jednoduché vlastnosti clearfix bez nutnosti dalších značek. Pomocí CSS Clearfix zvětšíte nebo zmenšete rozměry nadřazených prvků, abyste je upravili podle rozměrů podřízených prvků.