CSS clear Property

CSS clear is a property used to control the behavior of elements in relation to floated elements within the same container. When an element is floated, it is taken out of the normal flow of the document and may cause other elements to wrap around it. The clear property allows you to specify whether an element should be positioned below (cleared) any floated elements that precede it in the document flow.

Property values

  1. none: The element is not required to be cleared. It will be positioned according to the normal flow of the document, regardless of any floated elements.
  2. left: The element must be positioned below any floated elements that are to the left of it. It will clear any floated elements on the left side.
  3. right: The element must be positioned below any floated elements that are to the right of it. It will clear any floated elements on the right side.
  4. both: The element must be positioned below any floated elements, regardless of their direction. It will clear both left and right floated elements.

Let's look at some examples to understand the usage of the clear property:

Example 1: Clearing Floats

<!DOCTYPE html> <html> <head> <style> .float-left { float: left; width: 100px; height: 100px; background-color: red; } .clearfix { clear: both; } </style> </head> <body> <div class="float-left"></div> <p class="clearfix">This paragraph will be positioned below the floated div.</p> </body> </html>
run this source code Browser View

This paragraph will be positioned below the floated div.

In this example, the paragraph with the class clearfix will be positioned below the floated div because it has the clear: both; property, which clears both left and right floated elements.

Example 2: Clearing Floats to the Right

<!DOCTYPE html> <html> <head> <style> .float-right { float: right; width: 100px; height: 100px; background-color: blue; } .clearfix { clear: right; } </style> </head> <body> <div class="float-right"></div> <p class="clearfix">This paragraph will be positioned below the floated div to the right.</p> </body> </html>
run this source code Browser View

This paragraph will be positioned below the floated div to the right.

In this example, the paragraph with the class clearfix has clear: right;, so it will be positioned below the floated div to the right.

Example 3: No Clearing

<!DOCTYPE html> <html> <head> <style> .float-left { float: left; width: 100px; height: 100px; background-color: green; } .no-clear { clear: none; } </style> </head> <body> <div class="float-left"></div> <p class="no-clear">This paragraph will not be cleared and may wrap around the floated div.</p> </body> </html>
run this source code Browser View

This paragraph will not be cleared and may wrap around the floated div.

In this example, the paragraph with the class no-clear has clear: none;, so it will not be cleared and may wrap around the floated div.

Avoiding unwanted overlaps

<div class="image">Image</div> <p>Text next to image</p>

Without clear, the paragraph might wrap around the image, causing overlap. Adding clear: left to the paragraph pushes it below the image.

Clearing only specific sides

<div class="sidebar left-float">Sidebar</div> <div class="content">Main content</div>

Here, the content can flow next to the left-floated sidebar by applying clear: right to the content area. It will still wrap around any right-floated elements.

Important Notes:
  1. The clear property generally applies to block-level elements, though inline elements can also use it.
  2. clear affects only elements within the same block formatting context. Nested elements in different contexts might require additional clearing.
  3. Consider using clearfix techniques or alternative layout methods for complex floating element setups.

Conclusion

CSS clear is a property used to control the behavior of elements in relation to floated elements within the same container. It allows elements to be positioned below any preceding floated elements, ensuring proper layout and preventing unwanted wrapping or overlap. The clear property can take values of "none", "left", "right", or "both", specifying which direction(s) elements should be cleared from floated elements.






Related Topics
  1. CSS Display Property
  2. CSS Positioning
  3. CSS Float
  4. Centering Elements in CSS
  1. CSS z-index Property