Nearby lessons
18 of 19🏊 CSS Float Property
📌 What is CSS Float Property?
The float property in CSS is used to place an element on the left or right side of its container, allowing text and inline elements to wrap around it.
- left – Floats the element to the left.
- right – Floats the element to the right.
- none – Default. No floating applied.
- inherit – Inherits the float value from its parent.
🔹 Float Right
Element floats to the right and the surrounding text wraps around it from the left.
Code Example
PREVIEW READY
🔹 Float Left
Element floats to the left and the surrounding text wraps around it from the right.
Code Example
PREVIEW READY
🔹 Clearfix Technique
Clearfix is used to fix container collapse caused by floated children. It forces the parent to acknowledge the height of floated elements.
Code Example
PREVIEW READY
💡 Float Best Practices
- ✅ Use floats primarily for text wrapping around images.
- 🧼 Always clear floats using clearfix or the
clearproperty. - 🚫 Avoid using float for full-page layouts—use Flexbox or Grid instead.
- ⚠️ Floated elements don't expand parent height—use clearfix to fix.
- 📏 Use margins to separate floated elements from surrounding text.
🚀 Modern Alternatives to Float
- 🧱 CSS Flexbox – For one-dimensional layouts.
- 🔲 CSS Grid – For complex two-dimensional layouts.
- 📄 CSS Columns – For newspaper-style text layout.
- 📌 CSS Position – For exact placement needs.
🧠 Test Your Knowledge
5 QuestionsProgress: 0 / 5
Keep Going!CSS - Clear