Grid Clearfix

Provides an easy way to include a clearfix for containing floats

View Source

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.

SCSS

@include grid-clearfix(
	  $clear: bottom
  );

Arguments

$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

SCSS

.card {
  @include grid-clearfix();
}

CSS

.card:after {
  clear: both;
  content: "";
  display: block;
}

SCSS

.card {
  @include grid-clearfix($clear: both);
}

CSS

.card::before {
  clear: both;
  content: "";
  display: block;
}

.card::after {
  clear: both;
  content: "";
  display: block;
}