indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

Clearfix

Add a clearfix utility to a container to quickly and conveniently clear floating content.

Add .clearfix to the parent element to quickly clear floats also suitable for usage as a mixin.

Use in HTML:

<div class="clearfix">...</div>

The mixin source code:

@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

Use the mixin in SCSS:

.element {
 @include clearfix;
}

The clearfix is used in the example that follows. A broken layout would result if the wrapping div did not span over the buttons in the absence of the clearfix.

RESULT