When elements are floated using float: left
or float: right
, the document flow can break in unexpected ways — text or blocks may wrap awkwardly. The clear
property in CSS is used to prevent elements from appearing next to floated elements, restoring proper layout flow.
🧾 What is clear
?
The clear
property tells an element not to wrap around floated elements on the left, right, or both sides. It’s commonly used after floated elements to “clear” their effect and maintain visual structure.
🧬 Syntax
selector {
clear: none | left | right | both | inline-start | inline-end;
}
Values:
Value | Description |
---|---|
none | Default. Allows floating elements on both sides |
left | Prevents wrapping around left-floated elements |
right | Prevents wrapping around right-floated elements |
both | Prevents wrapping around both left and right floats |
inline-start | Prevents float on the start side (logical, direction-aware) |
inline-end | Prevents float on the end side (logical, direction-aware) |
🎯 Examples
1. Clearing both sides after floats
.clearfix {
clear: both;
}
<div style="float:left; width:50px;">Left</div>
<div style="float:right; width:50px;">Right</div>
<div class="clearfix">This starts below the floats</div>
This ensures the third div
appears below the two floated elements.
2. Only clearing left-floated elements
.break-left {
clear: left;
}
Prevents an element from appearing beside anything floated to the left.
🔍 How It Works
- The
clear
property affects block-level elements. - It forces an element to move below floated content (if on the specified side).
- Commonly used to fix collapsing container heights when child elements are floated.
- Not needed when using modern layout methods like Flexbox or Grid.
🛠️ Best Practices
- Use
clear: both
when ending a float-heavy section to ensure proper stacking. - Avoid layout overuse of floats — prefer Flexbox or Grid for responsive design.
- Use
.clearfix
utility classes to automatically applyclear: both
when needed:
.clearfix::after {
content: "";
display: table;
clear: both;
}
✅ Browser Support
The clear
property is fully supported in all modern browsers:
- ✅ Chrome
- ✅ Firefox
- ✅ Safari
- ✅ Edge
- ✅ Internet Explorer 6+
🔚 Conclusion
The CSS clear
property is a classic and reliable way to restore normal document flow after floated elements. While modern CSS techniques have reduced the need for floats, clear
remains useful in legacy layouts or specific float-based designs.