Nearby lessons
19 of 19🧹 CSS Clear Property
📌 What is CSS Clear Property?
The clear CSS property is used to control the behavior of elements following floated elements.
- left – Prevents the element from being beside left-floated elements.
- right – Prevents the element from being beside right-floated elements.
- both – Moves the element below any floated elements on either side.
- none – Default value; element does not clear any floats.
🔹 clear: left
The element is pushed below any left-floated elements.
Code Example
PREVIEW READY
🔹 clear: right
The element is pushed below any right-floated elements.
Code Example
PREVIEW READY
🔹 clear: both
The element is pushed below both left- and right-floated elements.
Code Example
PREVIEW READY
💡 Clear Property Best Practices
- ✅ Use
overflow: autoordisplay: flow-rooton containers to clear internal floats (clearfix technique). - 📏 Use
clear: left,right, orbothonly when necessary for layout clarity. - 🧼 Prefer modern layout techniques like Flexbox or Grid over float + clear for new designs.
- 📚 Document float/clear usage in complex layouts for team understanding.
- ⚠️ Use
clearon block elements, not inline elements.
🧠 Test Your Knowledge
5 QuestionsProgress: 0 / 5
Keep Going!Course Complete!