Clear Property
Last updated: 2026-09-13
clear Clear Property
The clear property controls whether an element is allowed to sit next to floated elements on its left, right, or both sides. When set to left, right, or both, the element moves below the relevant floats. It is an important tool for preventing layout breakage in float-based layouts.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
clear: none | left | right | both | inline-start | inline-end;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | left | right | both | Keyword | Float clearing behavior. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| clear | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： clear:both is the most common value — the element allows no floats on either side and moves below all floats.
Warning： clear only works on block-level elements, not inline ones. In modern layouts, the recommended way to clear floats is the clearfix pattern: a ::after pseudo-element with clear:both.
❓ FAQ
QWhat's the difference between clear and clearfix?
Aclear is a CSS property applied to the element after a float, telling it to move below the floated element so text or blocks do not sit alongside it. clearfix is a clearing technique, usually a ::after pseudo-element with clear:both on the parent, that makes the parent wrap its floated children again and fixes height collapse. One is a property; the other is a complete solution.
QCan clear be used on a floated element itself?
AYes, but with nuance: when clear is set on a floated element, it moves below preceding floats of the same direction. For example, an element with float:left and clear:left drops below the earlier left-floated elements, not below all floats. clear:both moves it below the point where both left and right floats end, which is commonly used to start text on a new line after a floated image.
QWhat does clear:both mean?
Aclear:both declares that no floated elements are allowed on either side, so the browser pushes the element to a new line below all preceding floats. left clears only left floats, and right clears only right floats. clear:both is the most used value and, combined with a ::after pseudo-element, forms the classic clearfix solution that keeps parent containers from collapsing when their children are floated.
QWhy isn't the clear property working?
ACommon reasons: first, clear only affects block-level elements, so it does nothing on inline elements like span; second, the element itself is floated, so clear can only move it below preceding same-direction floats, giving a different result than expected; third, the element is not actually affected by a float, because the floats already ended. Confirm the element is block-level and that a float precedes it.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
float Property
Learn the problem that clear solves.
Flexbox Layout
The modern alternative to float-based layouts.
