CSS-এ clear প্রপার্টি ব্যবহার করে ফ্লো ক্লিয়ার করা

এই ধরনের সমস্যা সমাধানের জন্য একটি বিশেষ প্রপার্টি clear exists, যা ফ্লো বাতিল করে। মান left বাম দিকে ফ্লো বাতিল করে, মান right - ডানদিকে, এবং মান both - উভয় দিক থেকে। এই মান এবং প্রায়শই ব্যবহৃত হয়।

সুতরাং, প্রপার্টি clear ফ্লো বাতিল করে। আমাদের ক্ষেত্রে, এটি আমাদের প্রথম div-এর ভাসমান ছবিটি দ্বিতীয় div-এর উপর চাপা দিতে দেবে না।

এক্ষেত্রে clear সেই এলিমেন্টটিকে দেওয়া উচিত, যার উপর ভাসমান এলিমেন্টগুলি চাপা দেবে না, অর্থাৎ আমাদের ক্ষেত্রে এটি দ্বিতীয় div-এ দেওয়া উচিত।

আসুন এটি করা যাক - দ্বিতীয় div-কে parent ক্লাস ছাড়াও clearfix ক্লাস দিন এবং এই নতুন ক্লাসের জন্য clear প্রপার্টি both মানে সেট করুন - ছবির চাপা দেওয়া অদৃশ্য হয়ে যাবে:

html<div class="parent">
  <img src="img.png" alt="">
  text
</div>
<div class="parent clearfix">
  text
</div>

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат:

নাম clearfix সাধারণভাবে গৃহীত, তাই ভবিষ্যতে এটি ব্যবহার করুন।