Clearfix 1.2.2

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

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Clear floats after floated media with the clearfix helper when float layout is intentional.

When not

Prefer flex/grid for new layouts — clearfix is for float edge cases.

Example

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

<div class="velin-clearfix">
  <button class="velin-btn velin-btn--primary float-start">Float start</button>
  <button class="velin-btn velin-btn--secondary velin-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;
}