CSS-এ ফ্লোটগুলির পিতামাতার উপর প্রভাব

এখন ধরুন আমাদের কাছে একটি ডিভ আছে, যার ভিতরে একটি ইমেজ রয়েছে। ডিভটিতে একটি বর্ডার সেট করি, এবং ইমেজটিতে এখনই float প্রপার্টি সেট করব না।

আসুন দেখি এটি ব্রাউজারে কেমন দেখাবে:

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

cssdiv {
  border: 1px solid red;
}

Результат:

এখন ইমেজটিতে float প্রপার্টি সেট করি left ভ্যালু সহ। এই ক্ষেত্রে একটি আশ্চর্যজনক ঘটনা ঘটবে - পিতামাতার উচ্চতা অদৃশ্য হয়ে যাবে, এর নীচের সীমানা হবে ঠিক উপরেরটির পরেই শুরু হবে, এবং ইমেজটি নীচে থেকে তার পিতামাতার বাইরে চলে আসবে:

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

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

অর্থাৎ, যেসব উপাদানে float প্রপার্টি সেট করা থাকে, তারা তাদের পিতামাতার উচ্চতা বাড়ায় না।

float প্রপার্টিটির left-এর পরিবর্তে right ভ্যালু লিখি। পিতামাতার আচরণ পরিবর্তন হবে না, কিন্তু ইমেজটি ডানদিকে ভাসতে শুরু করবে:

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

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат: