1. Docs
2. Helpers
3. Clearfix

Clearfix

Use .velin-clearfix on the parent element to automatically clear floated children and prevent container collapse.

Example

Without clearfix the parent container collapses. Adding .velin-clearfix fixes this.

<div class="velin-clearfix">
  <button class="btn btn-primary float-start">Float start</button>
  <button class="btn btn-secondary float-end">Float end</button>
</div>

How it works

The clearfix uses the ::after pseudo-element micro clearfix pattern:

.velin-clearfix::after {
  content: "";
  display: block;
  clear: both;
}