The clear Property in CSS

The clear property in CSS is used to control the behavior of elements when they follow a floated element. It prevents an element from wrapping around a preceding floated element by "clearing" the float, ensuring that the cleared element moves down below the floated elements. This property is often used in conjunction with the float property to manage layouts and avoid overlap or layout issues.

Values of clear

1. clear: left;

   • The element will move down below any floated elements on the left side.

   .clear-left {
     clear: left;
   }
   

   This ensures that the element appears below any left-floated elements.

2. clear: right;

   • The element will move down below any floated elements on the right side.

   .clear-right {
     clear: right;
   }
   

   This ensures that the element appears below any right-floated elements.

3. clear: both;

   • The element will move down below any floated elements, whether they are floated to the left or right.

   .clear-both {
     clear: both;
   }
   

   This is the most common value for the clear property, ensuring that the element is not affected by any floated elements above it.

4. clear: none;

   • The element will not clear any floats, meaning it can wrap around floated elements if space allows.

   .clear-none {
     clear: none;
   }
   

   This is the default value and allows the element to be placed next to floated elements if there is enough space.

Usage of clear

The clear property is typically applied to block-level elements (like div, p, etc.) that are positioned after a floated element. It ensures that these elements do not wrap around the floated elements, helping to maintain a consistent and predictable layout.

Example

<div class="float-left">Float Left</div>
<div class="float-right">Float Right</div>
<div class="clear-both">Cleared both floats</div>
<p>This paragraph is also below the floats.</p>

.float-left {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
}

.float-right {
  float: right;
  width: 150px;
  height: 100px;
  background-color: lightcoral;
}

.clear-both {
  clear: both;
  background-color: lightgreen;
}

Explanation

• float-left: Floated to the left.
• float-right: Floated to the right.
• clear-both: This div clears both left and right floats, so it appears below the floated elements, even if they were occupying space above it.

Common Use Case: Clearing Floats in a Container

When using floated elements inside a container, you may encounter a problem where the container does not expand to fully enclose its floated children. This can cause the container's height to collapse. To solve this issue, you can clear the float:

<div class="container">
  <div class="float-left">Float Left</div>
  <div class="float-right">Float Right</div>
  <div class="clear-both"></div> <!-- Clearing the floats -->
</div>

.container {
  background-color: lightgray;
}

.clear-both {
  clear: both;
}

Alternatively, you can use the "clearfix" hack:

.container::after {
  content: "";
  display: table;
  clear: both;
}

This method automatically clears floats inside a container without the need for an extra div element.