Grid Clearfix
Provides an easy way to include a clearfix for containing floats
The grid-clearfix()
mixin creates a standard clearfix with some basic options. This mixin is leveraged by other parts of the framework and is name spaced under grid-
to avoid conflicts with other libraries.
@include grid-clearfix(
$clear: bottom
);
Arguments
$clear
$clear
the clear
argument defines where the clearfix is put. It only accepts 3 distict options
bottom
will apply clearfix css to the::after
pseudo-element.top
will apply clearfix css to the::before
pseudo-element.both
will apply clearfix css to the::before
and::after
pseudo-elements.
The default value for clear
is bottom
since that is the most typically used behavior.
Examples
.card {
@include grid-clearfix();
}
.card:after {
clear: both;
content: "";
display: block;
}
.card {
@include grid-clearfix($clear: both);
}
.card::before {
clear: both;
content: "";
display: block;
}
.card::after {
clear: both;
content: "";
display: block;
}
Updated less than a minute ago