Utility classes

• Introduction
• Color
• Background-color
• Font-size
• Font-family
• Text-align
• Text-transform
• Hidden
• Visible
• Float
• Clear
• Clearfix
• Border
• Margin
• Padding
• Row-padding
• Image

Clear

The clearfix class provides a way for an element to clear a floated element above.

Overall usage

Used in layouts to clear floated elements above.

Accessibility

N/A

---

Clears at all sizes

<div class="u-clear-left">u-clear-left</div>
<div class="u-clear-right">u-clear-right</div>
<div class="u-clear-both">u-clear-both</div>

---

xs only

<div class="u-clear-left-xs">u-clear-left-xs</div>
<div class="u-clear-right-xs">u-clear-right-xs</div>
<div class="u-clear-both-xs">u-clear-both-xs</div>

---

sm only

<div class="u-clear-left-sm">u-clear-left-sm</div>
<div class="u-clear-right-sm">u-clear-right-sm</div>
<div class="u-clear-both-sm">u-clear-both-sm</div>

---

md only

<div class="u-clear-left-md">u-clear-left-md</div>
<div class="u-clear-right-md">u-clear-right-md</div>
<div class="u-clear-both-md">u-clear-both-md</div>

---

lg only

<div class="u-clear-left-lg">u-clear-left-lg</div>
<div class="u-clear-right-lg">u-clear-right-lg</div>
<div class="u-clear-both-lg">u-clear-both-lg</div>