Tag clear

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:

ValueDescription
noneDefault. Allows floating elements on both sides
leftPrevents wrapping around left-floated elements
rightPrevents wrapping around right-floated elements
bothPrevents wrapping around both left and right floats
inline-startPrevents float on the start side (logical, direction-aware)
inline-endPrevents 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 apply clear: 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.