CSS-এ ট্যাগের নীচে ভাসমান উপাদান

ধরুন আমাদের কাছে দুটি অনুচ্ছেদ এবং একটি ছবি আছে, যেটি প্রথম অনুচ্ছেদে স্থাপন করা হয়েছে। ধরুন এই ছবিটির জন্য আমরা float বৈশিষ্ট্য সেট করেছি right মান হিসাবে, এবং এছাড়াও অর্ধ-স্বচ্ছতা:

html<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

এবার আসুন HTML কোডে ছবিটি প্রথম অনুচ্ছেদের পরে রেখে দেখি কি হয়:

html<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <img src="img.png" alt="">
  <p>
    some long text
  </p>
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

যেমনটি আমরা দেখতে পাচ্ছি, ছবিটিকে দ্বিতীয় অনুচ্ছেদের টেক্সট ঘিরে রেখেছে, কিন্তু প্রথমটিরটি নয়।

আসুন আমাদের ছবিটি সম্পূর্ণভাবে দ্বিতীয় অনুচ্ছেদের পরে নিয়ে যাই। এই ক্ষেত্রে এটি ডানদিকে ভাসবে, কিন্তু কোনও টেক্সট ফ্লো হবে না:

html<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

এর মানে হল, শুধুমাত্র সেই উপাদানগুলিই ছবিটিকে ঘিরে রাখবে যেগুলি তার নীচে অবস্থিত, কিন্তু সেগুলি নয় যেগুলি তার উপরে অবস্থিত।