Float

Toggle floats on any element using logical-property float utilities.

Float Classes

<div class="velin-float-start">Float start (left in LTR)</div>
<div class="velin-float-end">Float end (right in LTR)</div>
<div class="velin-float-none">No float</div>

Responsive Floats

Responsive variants exist for each breakpoint:

<div class="velin-float-sm-start">Float start on sm+</div>
<div class="velin-float-md-end">Float end on md+</div>
<div class="velin-float-lg-none">No float on lg+</div>

Clearfix

Clear floated children by adding .velin-clearfix to the parent:

<div class="velin-clearfix">
  <img class="velin-float-start" src="..." alt="...">
  <p>Text wrapping around the floated image...</p>
</div>