CSS-এ float বৈশিষ্ট্য এবং একাধিক ব্লক

এখন ধরুন HTML কোডে শুধুমাত্র একটি ডিভ-চাইল্ড নেই, বরং দুটি আছে এবং উভয়কেই float মান left-এ সেট করা হয়েছে। আসুন দেখি, কি হবে:

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

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

Результат:

সুতরাং, আমরা দেখতে পাচ্ছি, দুটি ব্লক-চাইল্ড একটি সারিতে সাজানো হয়েছে, এবং HTML কোডে প্রথম ব্লকটি হবে বামে অবস্থিত।

এখন left মানের পরিবর্তে right মান লিখুন। এই ক্ষেত্রে ব্লকগুলি ডানদিকে ভাসবে, এবং HTML কোডে তাদের ক্রমের তুলনায় তাদের ক্রম উল্টে যাবে:

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

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

Результат: