CSS-এ ফ্লোট বৈশিষ্ট্য এবং পাঠ্যবিহীন প্যারেন্ট

এখন ধরা যাক আমাদের কাছে parent ক্লাস সহ একটি ডিভ আছে পাঠ্য ছাড়া, কিন্তু দুটি child ক্লাস সহ ব্লক-সন্তান সহ:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}
.child {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

চলুন ব্লক-সন্তানদের বাম দিকে ভাসমান করি এবং দেখি কি হয়:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

যেমন আমরা দেখতে পাচ্ছি, ব্লক-সন্তানরা একটি সারিতে সাজেছে, তবে, প্যারেন্টের উচ্চতা চলে গেছে এবং আমাদের ব্লকগুলি নীচে তার বাইরে বেরিয়ে এসেছে।

এই আচরণ আমাদের কাছে ইতিমধ্যেই পরিচিত। সমস্যার সমাধানের জন্য ক্লিয়ারফিক্স ব্যবহার করা উচিত। চলুন এটি করি:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="clearfix"></div>
</div>

css.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

.clearfix {
  clear: both;
}

Результат: