in English
Clearfix
Poista kelluva sisältö nopeasti ja helposti säiliöstä lisäämällä clearfix-apuohjelma.
Tyhjennä float
s helposti lisäämällä .clearfix
pääelementtiin . Voidaan käyttää myös sekoituksena.
Käytä HTML:ssä:
<div class="clearfix">...</div>
Mixinin lähdekoodi:
@mixin clearfix() {
&::after {
display: block;
clear: both;
content: "";
}
}
Käytä mixinia SCSS:ssä:
.element {
@include clearfix;
}
Seuraava esimerkki näyttää, kuinka clearfix-korjausta voidaan käyttää. Ilman clearfixiä wrapping div ei ulottuisi painikkeiden ympärille, mikä aiheuttaisi rikkinäisen asettelun.
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
<button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
</div>