Layouts

Float

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

Variant

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

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