CSS-এ float বৈশিষ্ট্যের পরিচিতি

ধরা যাক আমাদের কাছে কিছু দীর্ঘ পাঠ্য সহ একটি div আছে। আসুন এই পাঠ্যের শুরুতে একটি ছবি সন্নিবেশ করি:

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}

Результат:

যেমন আপনি দেখতে পাচ্ছেন, ছবিটির নীচের অংশটি প্রথম পাঠ্য লাইনে অবস্থান করছে, এবং বাকি অংশ উপরে চলে গেছে। ছবিটির ডানদিকে একটি বড় খালি জায়গা তৈরি হয়েছে। আসুন এটি করি যাতে পাঠ্য সেই খালি জায়গাটি পূরণ করে। এটি করার জন্য ছবিটিতে float বৈশিষ্ট্য সেট করব left মানে:

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: left;
}

Результат:

সুতরাং, এখন ছবিটি বামে ভাসছে, এবং পাঠ্য সেই অনুসারে ডানদিকে এটি ঘিরে থাকে। এ情况下 ছবির পাশের খালি জায়গা消失了।

ছবিটিকে বামে নয়, ডানদিকে ভাসানোও সম্ভব। এটি করার জন্য float সেট করুন right মানে:

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: right;
}

Результат: