📘 What is CSS Clear?

The CSS clear property is used with floated elements. It specifies on which sides of an element other floated elements are not allowed.

In simple words, clear tells an element: “Do not move beside a floated element.”

🎯 Why Do We Use Clear?

• To stop an element from appearing beside a floated element.
• To move an element below floated content.
• To control left and right floating elements.
• To prevent unwanted layout overlap.
• To create a clean separation after floated sections.

🧩 CSS Clear Syntax

selector {
    clear: value;
}

🔑 Clear Property Values

💻 Example 1: clear: both

The most commonly used value is both. It prevents the element from appearing beside either left or right floated elements.

<div class="box">
    Floating Box
</div>

<p class="text">
    This paragraph comes after the floating box.
</p>

<style>

.box {
    float: left;
    width: 180px;
    height: 100px;
    background: steelblue;
    color: white;
    padding: 20px;
}

.text {
    clear: both;
}

</style>

▶️ Live Example

The blue box is floated to the left. The following section uses clear: both, so it starts below the floated box.

⬅️ Example 2: clear: left

clear: left prevents an element from appearing beside a left-floating element.

.box {
    float: left;
}

.content {
    clear: left;
}

➡️ Example 3: clear: right

clear: right prevents an element from appearing beside a right-floating element.

.box {
    float: right;
}

.content {
    clear: right;
}

↕️ Example 4: clear: both

clear: both clears both left and right floats. It is useful when a section should always begin below all floated elements.

.content {
    clear: both;
}

📊 Clear Values Comparison

🔗 Float and Clear Together

The float property moves an element to the left or right, while clear controls how subsequent elements interact with those floats.

.image {
    float: left;
    margin-right: 20px;
}

.next-section {
    clear: both;
}

⚠️ Common Mistakes

• Using clear without understanding the related float.
• Using clear: left when both sides need to be cleared.
• Forgetting that clear affects the element on which the property is applied.
• Expecting clear to remove the float itself.

📝 Practice Exercise

Try the following tasks in your HTML Runner:

1. Create a box with float: left.
2. Create a paragraph beside the floating box.
3. Add a new section using clear: left.
4. Create a right-floating box.
5. Use clear: right on the next section.
6. Create both left and right floated boxes.
7. Use clear: both to place the next section below them.

📚 Quick Reference

✅ Key Points to Remember

• clear is commonly used with float.
• left clears left-floating elements.
• right clears right-floating elements.
• both clears floats on both sides.
• clear does not remove the float.
• clear: both is commonly used to start a section below floated content.