Clear Utilities clear-*

Control how elements behave around floated elements by clearing float effects on specific sides.

Quick Reference

clear-left

Clear left-floated elements

clear: left

clear-right

Clear right-floated elements

clear: right

clear-both

Clear both left and right floats

clear: both

clear-none

Don't clear any floats

clear: none

Interactive Examples

Clear Left

Without Clear

This element flows around the float

With Clear Left

This element clears the left float
<div class="float-left">Float</div>
<div class="clear-left">Cleared element</div>

Clear Right

Without Clear

This element flows around the float

With Clear Right

This element clears the right float

Clear Both

Multiple Floats

Flows between floats

Cleared Element

This clears both floats
<div class="float-left">Left</div>
<div class="float-right">Right</div>
<div class="clear-both">Cleared</div>

Clearfix Pattern

Container Collapse

Container doesn't wrap floated children

With Clearfix

Container properly contains floated children
<div class="clearfix">
  <div class="float-left">Left</div>
  <div class="float-right">Right</div>
</div>

Common Use Cases

📰 Article Sections

Clear floated images to start new content sections.

<section class="clear-both">

🏷️ Form Rows

Ensure form elements start on new lines after floated labels.

<div class="clear-left">

📊 Widget Containers

Contain floated elements within widget boundaries.

<div class="clearfix">

🔘 Button Groups

Clear floated buttons to start new button rows.

<div class="clear-both">

📱 Card Layouts

Ensure cards don't wrap around floated elements.

<div class="clear-left">

📝 Content Blocks

Separate content blocks from floated sidebars.

<main class="clear-right">

Clear Behavior & Effects

How Clear Works

Moves Element Down

Pushes the element below any floated elements on the specified side

Prevents Wrapping

Stops content from flowing around floated elements

Creates New Line

Forces the element to start on a new line

Affects Layout Flow

Changes the document flow for subsequent elements

Clear Types Comparison

clear-left

Only clears left-floated elements. Right floats can still affect the element.

clear-right

Only clears right-floated elements. Left floats can still affect the element.

clear-both

Clears both left and right floated elements. Most commonly used.

clear-none

Removes clear behavior. Element can flow around floated elements.

Understanding Clearfix

The Problem

When all children of a container are floated, the container "collapses" and has zero height. This happens because floated elements are removed from the normal document flow.

<div> <!-- Height: 0px -->
  <div class="float-left">Child 1</div>
  <div class="float-right">Child 2</div>
</div>

The Solution

The clearfix utility adds a pseudo-element that clears floats, forcing the container to wrap around its floated children.

<div class="clearfix"> <!-- Proper height -->
  <div class="float-left">Child 1</div>
  <div class="float-right">Child 2</div>
</div>

Best Practices

✅ Do

  • • Use clear-both for most clearing needs
  • • Apply clearfix to containers with floated children
  • • Use specific clear directions when needed
  • • Test clearing behavior on different screen sizes
  • • Combine with responsive utilities
  • • Use to separate content sections

❌ Don't

  • • Use clear on elements that don't need it
  • • Forget to clear when using floats
  • • Use when modern layout methods would be better
  • • Apply clear without understanding the effect
  • • Use excessive clearing that breaks layout
  • • Ignore container collapse issues

Related Layout Classes

float-*

Float utilities

clear-*

Current page

block

Display utilities

isolate

Isolation utilities