Clearfix in HTML / Bootstrap

❌ Without Clearfix (Problem)

❗ Parent ki height collapse ho gayi kyunki float element normal flow se bahar hai.

✅ With Clearfix (Solution)

✔ Clearfix parent ko batata hai ki andar float element hai.

📌 Clearfix kyon kaam karta hai?

Clearfix ek CSS trick hai jo parent ke andar ::after pseudo-element add karta hai aur clear: both lagata hai.

.clearfix::after {
  display: block;
  content: "";
  clear: both;
}
  

📍 Clearfix kaha use hota hai?

• Float based layout me
• Image float ke sath text ho
• Cards / boxes float kiye ho
• Jab parent ki height zero ho rahi ho

🚀 Modern Best Practice

Aaj kal Flexbox ya Grid use karo, clearfix ki zarurat nahi padti.

❌ Without Clearfix

✅ With Clearfix

Wrapper ne cards ki height le li