CSS clear Property

What You’ll Learn

The clear property controls how elements behave around floated content. It helps you fix overlap and keep footers, paragraphs, and sections in the right place.

Definition and Usage

The clear CSS property controls the behavior of elements around floating content. When elements are floated using the float property, they are removed from normal document flow and other content can wrap beside them.

The clear property specifies whether an element should be moved below (cleared) floating elements that precede it. This prevents unwanted overlap and keeps your layout readable.

📝 Syntax

The syntax for clear is straightforward — you choose which floats to clear:

selector {
  clear: value;
}

Basic Example

.footer {
  clear: both;
}

Syntax Rules

• The initial value is none.
• Values: none, left, right, both, inline-start, inline-end.
• Apply clear to the element that should drop below preceding floats.
• Works with elements that have float: left or float: right above them.
• Modern layouts often use Flexbox or Grid, but clear remains essential for float-based designs.

💎 Property Values

The clear property accepts keyword values that describe which floats to move past.

clear and float Together

clear only matters when floats exist above an element in the document. Typical workflow:

1. Float images, sidebars, or columns with float: left or float: right.
2. Content that follows may wrap beside those floats.
3. Apply clear on the next block that should start below all floats — often a footer, heading, or full-width section.

A common pattern is the clearfix: a helper element (or pseudo-element) with clear: both placed after floated children so a parent container expands to contain them.

Examples Gallery

Try clear: both, side-specific clearing, a floated image layout, and a footer clearfix pattern.

<style>
  .box {
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
    background-color: lightblue;
  }
  .clear {
    clear: both;
    background-color: lightgreen;
    padding: 10px;
  }
</style>

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="clear">Cleared Content</div>

<style>
  .float-left { float: left; width: 80px; height: 80px; background: #fde68a; }
  .float-right { float: right; width: 80px; height: 80px; background: #fbcfe8; }
  .clear-left { clear: left; background: #e0e7ff; padding: 8px; }
</style>

<div class="float-left">Left</div>
<div class="float-right">Right</div>
<div class="clear-left">Clears left float only</div>

<style>
  img {
    float: right;
    width: 120px;
    margin: 0 0 8px 12px;
  }
  .caption {
    clear: right;
    font-size: 0.875rem;
    color: #64748b;
  }
</style>

<img src="photo.jpg" alt="Sample">
<p>Text wraps beside the image on the left.</p>
<p class="caption">Caption clears below the image.</p>

<style>
  .column {
    float: left;
    width: 30%;
    padding: 10px;
    background: #dbeafe;
  }
  footer {
    clear: both;
    background: #1e293b;
    color: #f8fafc;
    padding: 12px;
  }
</style>

<div class="column">Col 1</div>
<div class="column">Col 2</div>
<div class="column">Col 3</div>
<footer>Site footer — full width below columns</footer>

💡 Best Practices