CSS Clear

The clear property in CSS is used to control the behavior of floating elements. It specifies whether an element should be moved down to avoid floating elements on the left, right, or both sides. This property is commonly used to clear floats and ensure that elements are properly positioned within their containers.

Values of the Clear Property

The clear property can take the following values:

• none - Default value. The element does not clear any floating elements.
• left - The element moves down until there are no floating elements on its left side.
• right - The element moves down until there are no floating elements on its right side.
• both - The element moves down until there are no floating elements on either side.
• inherit - The element inherits the clear value from its parent element.

Basic Usage

Here are some examples demonstrating how to use the clear property:

        
            .clear-left {
    clear: left;
    background-color: lightcoral;
    padding: 10px;
}
.float-left {
    float: left;
    width: 150px;
    height: 150px;
    margin: 10px;
    background-color: lightblue;
}
        
    

In this example, the element with clear: left; will move down to avoid any left-floating elements.

        
            .clear-right {
    clear: right;
    background-color: lightcoral;
    padding: 10px;
}
.float-right {
    float: right;
    width: 150px;
    height: 150px;
    margin: 10px;
    background-color: lightgreen;
}
        
    

In this example, the element with clear: right; will move down to avoid any right-floating elements.

        
            .clear-both {
    clear: both;
    background-color: lightcoral;
    padding: 10px;
}
.float-left {
    float: left;
    width: 150px;
    height: 150px;
    margin: 10px;
    background-color: lightblue;
}
.float-right {
    float: right;
    width: 150px;
    height: 150px;
    margin: 10px;
    background-color: lightgreen;
}
        
    

In this example, the element with clear: both; will move down to avoid any floating elements on either side.

Practical Tips and Notes

Here are some practical tips and important notes to keep in mind when using the clear property:

• Clearing Floats: The clear property is essential for clearing floats and ensuring that elements are properly positioned within their containers. Without it, floated elements might overlap or disrupt the layout.
• Using Clearfix: In many cases, you'll need to clear floats for entire containers. Use the clearfix hack to ensure containers expand to contain their floated children. For example:
  Try yourself

          
              .container {
    background-color: lightgrey;
  }
  
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  
  .box {
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: red;
  }
          
      

• Layout Stability: Properly clearing floats helps maintain layout stability, especially when dealing with responsive designs and complex layouts.
• Common Use Cases: The clear property is often used after floating images, columns, or other elements to ensure that subsequent content is correctly positioned.
• Browser Compatibility: The clear property is widely supported across all major browsers.

Summary

The clear property in CSS is a powerful tool for managing the behavior of floating elements. By understanding and using the clear property, you can ensure that your layouts are stable and elements are properly positioned. Remember to use the clearfix hack for containers and consider layout stability in responsive designs.