Layouts

Float

Utilities for sets an element's placement to a side of its container and allows content to wrap around it.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
float-right	float: right
float-left	float: left
float-none	float: none
clearfix	&::after { content: ""; display: table; clear: both; }

Usage

Set image to float-left.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ea, architecto doloremque exercitationem sapiente magnam, nostrum accusantium error eius minus, earum provident.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos minus qui assumenda mollitia, quaerat enim soluta et. Temporibus enim aspernatur eveniet, corporis delectus architecto ab repellat corrupti vitae natus culpa?

<div>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  <img class="float-left" src="...">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</div>

HTML

.dummy {
  @extend
    .float-left;
}

SCSS

Set image to float-right.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ea, architecto doloremque exercitationem sapiente magnam, nostrum accusantium error eius minus, earum provident.

<div>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  <img class="float-right" src="...">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</div>

HTML

.dummy {
  @extend
    .float-right;
}

SCSS