CSS clear Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS clear property pushing a block below floated boxes on the left and right
Definition

Definition and Usage

The clear property decides whether an element must sit below earlier floated elements. Without it, text and blocks can wrap beside floats. With left, right, or both, the element drops under those floats.

It applies to block-level elements (floating or not). New layouts often use Flexbox or Grid instead of floats, but clear still matters for float-based wrapping and older code.

Baseline · Widely available.

Not deprecated and not experimental. none, left, right, and both work across modern browsers and Internet Explorer. Logical values inline-start and inline-end need newer browsers (see Browser support).

Syntax

CSS Syntax

syntax.css
clear: none | left | right | both | inline-start | inline-end | initial | inherit;

The initial value is none. The property is not inherited.

Values

Property Values

ValueDescriptionTry it
noneDo not clear floats (default). Content may sit beside themTry it
leftMove below left floatsTry it
rightMove below right floatsTry it
bothMove below left and right floatsTry it
inline-startClear floats on the start side (left in LTR, right in RTL)Try it
initialResets to noneTry it
inheritUses the parent’s clear valueTry it
Approach

How to Use clear

Float something first. Then clear on the element that must start below those floats.

  1. Float one or more boxes with float: left or right.
  2. On the next block, set clear: left, right, or both.
  3. Check the result: the cleared block’s top edge sits under the relevant floats.
  4. To grow a parent around floats (not push a sibling), prefer display: flow-root on the parent.
PieceRequired?Role
Earlier float(s)Yes (to see an effect)float: left / right on siblings above
clear valueYesWhich float sides to drop below
Block-level targetYesclear applies to block-level elements
Parent heightSeparate jobUse display: flow-root, not clear, to contain floats
Try it

Live Preview

Blue floats left. Yellow floats right. Change only clear on the green block.

both drops the green block under every float. none lets it sit beside them.

Box

clear: both

Code

CSS Examples

Each snippet focuses on clear. Floats are only there so clearing is visible. Use Try It Yourself for a live editor.

Example 1 — Clear Left Floats

Drop below a left float. A right float can still sit beside the block.

CSS
<style>
  .left { float: left; width: 80px; height: 80px; background: #93c5fd; }
  .right { float: right; width: 80px; height: 80px; background: #fcd34d; }
  .after { clear: left; background: #bbf7d0; padding: 8px; }
</style>

<div class="left">Left</div>
<div class="right">Right</div>
<p class="after">Clears left only</p>
Try It Yourself

How It Works

  1. Float both sides. Blue goes left; yellow goes right.
  2. Clear left only. clear: left pushes the green block under the blue box.
  3. Right may remain. The yellow float can still share the line if there is room.
  4. Same block formatting context. Clearing only affects earlier floats in this flow.

Example 2 — Clear Right Floats

Drop below a right float while a left float may still wrap.

CSS
<style>
  .left { float: left; width: 80px; height: 80px; background: #93c5fd; }
  .right { float: right; width: 80px; height: 80px; background: #fcd34d; }
  .after { clear: right; background: #bbf7d0; padding: 8px; }
</style>

<div class="left">Left</div>
<div class="right">Right</div>
<p class="after">Clears right only</p>
Try It Yourself

How It Works

  1. Keep the same floats. Left and right boxes stay as before.
  2. Clear the right side. clear: right waits until the yellow float ends.
  3. Left can wrap. Content may still sit next to the blue float.
  4. Pick the side you need. Use left or right when only one float matters.

Example 3 — Clear Both Sides

Start a new full-width line under every float.

CSS
<style>
  .left { float: left; width: 80px; height: 80px; background: #93c5fd; }
  .right { float: right; width: 80px; height: 80px; background: #fcd34d; }
  .after { clear: both; background: #bbf7d0; padding: 8px; }
</style>

<div class="left">Left</div>
<div class="right">Right</div>
<p class="after">Clears both sides</p>
Try It Yourself

How It Works

  1. Float both sides again. Same blue and yellow boxes.
  2. Clear everything. clear: both waits until left and right floats are finished.
  3. Full-width start. The green block begins on its own line under both floats.
  4. Common pattern. Footers and section breaks under floated media often use both.

Edge Cases & Pitfalls

If clearing seems broken, check these first.

floats

No floats means no visible effect

clear only reacts to earlier floats in the same block formatting context. Without float, every value looks the same.

parent

clear does not expand the parent

A parent that holds only floats can collapse to zero height. Use display: flow-root on the parent to contain them. clear is for later siblings.

side

left clears only left floats

clear: left ignores right floats. Use both when the next block must sit under every float.

layout

Flex and Grid do not need clear

Modern row/column layouts usually use Flexbox or Grid. Keep clear for float wrapping and legacy float layouts.

logical

inline-start follows direction

In LTR, inline-start matches left. In RTL it matches right. Prefer logical values when writing-mode and direction vary.

Compatibility

Browser Support

clear is a browser CSS property for float layout. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

clear

Classic values work everywhere, including Internet Explorer. Logical inline-start / inline-end: Chrome 118+, Edge 118+, Firefox 55+, Safari 15+.

99% Classic value support
Google Chrome 1+
Full support
Mozilla Firefox 1+
Full support
Apple Safari 1+
Full support
Microsoft Edge 12+
Full support
Opera 1+
Full support
Samsung Internet 1+
Full support
Internet Explorer 4+
Full support (classic values)
clear (none / left / right / both) Universally supported

Bottom line: Safe for production. Prefer left / right / both for maximum reach. Use inline-start / inline-end only when you can require modern browsers. It is not a runtime API.

Remember

Key Takeaways

  • Role: push an element below earlier floats on chosen sides.
  • Common value: clear: both for a full break under all floats.
  • Not a clearfix: parent height needs display: flow-root (or similar).
  • Initial value: none. Not inherited. Needs floats above to matter.

One line: floats wrap content; clear: both starts the next block fully underneath.

Frequently Asked Questions

It moves an element down so it sits below earlier floated elements on the sides you choose (left, right, or both). It applies to floating and non-floating block-level elements.
The initial value is none. The element can sit beside floats and is not pushed below them.
float pulls an element out of normal flow so content wraps around it. clear is set on a later element to stop it from wrapping beside those floats.
No. clear moves a following element below floats. To make a parent grow around floated children, use display: flow-root (or another block formatting context) on the parent.
Use it when the next block must start fully below every left and right float above it, such as a footer or a new section under floated images.
Classic values (none, left, right, both) are Baseline Widely available and work in all major browsers, including Internet Explorer. Logical values inline-start and inline-end need newer browsers (Chrome 118+, Safari 15+, Firefox 55+). It is a browser CSS property, not a Node.js feature.

Next: clip

Learn the older clip property and when clip-path is the better choice.

clip tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

CSS caret-color Property CSS clip Property