Layouts

Clear

Utilities for set whether an element is moved below preceding floated elements.

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
clear-left	clear: left
clear-right	clear: right
clear-both	clear: both
clear-none	clear: none

Usage

Set image to float-left against text clear-none.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id, repellat nostrum? Dolore fugit excepturi suscipit, eveniet fuga soluta corporis libero impedit maiores officiis aliquid obcaecati ex voluptatibus ipsum! Veniam, ratione.

<img class="float-left" src="...">

<div class="clear-none">
  ...
</div>

HTML

.dummy-image {
  @extend
    .float-left;
}
.dummy-text {
 @extend
   .clear-none;
}

SCSS

Set image to float-left against text clear-left.

<img class="float-left" src="...">

<div class="clear-left">
  ...
</div>

HTML

.dummy-image {
  @extend
    .float-left;
}
.dummy-text {
 @extend
   .clear-left;
}

SCSS

Set image to float-right against text clear-right.

<img class="float-right" src="...">

<div class="clear-right">
  ...
</div>

HTML

.dummy-image {
  @extend
    .float-right;
}
.dummy-text {
 @extend
   .clear-right;
}

SCSS