ক্লিয়ারফিক্স এবং CSS-এ প্যারেন্টের উচ্চতা

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

<div class="parent">
	<img src="img.png" alt="">
</div>

.parent {
	border: px solid red;
}
.parent img {
	float: left;
}

আসুন এটি এমনভাবে করি যাতে ভাসমান ছবিটি উচ্চতায় আমাদের ডিভকে প্রসারিত করে। এর জন্য একটি চতুর কৌশল ব্যবহার করা হয় - ছবির পরে একটি ডিভ রাখুন clearfix ক্লাস সহ কোনো পাঠ্য ছাড়াই।

আমাদের ছবিটি একটি ভাসমান উপাদান এবং এটি প্যারেন্টের উচ্চতা প্রসারিত করে না, কিন্তু clearfix ডিভ - ভাসমান নয় এবং এটি প্যারেন্টের উচ্চতাকে প্রভাবিত করে।

যেহেতু clearfix ডিভটিকে clear প্রপার্টি দেওয়া হয়েছে, এর ফলে এটি ছবিটিকে নীচে নামিয়ে দেবে এবং এর নীচে দাঁড়াবে, এতে করে প্যারেন্টকে উচ্চতায় প্রসারিত করবে।

clearfix ডিভটি নিজেই খালি এবং স্ক্রিনে দৃশ্যমান নয়, কিন্তু এটি একই সময়ে প্যারেন্টের উচ্চতা প্রসারিত করে।

সুতরাং, আসুন চেষ্টা করি:

<div class="parent">
	<img src="img.png" alt="">
	<div class="clearfix"></div>
</div>

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

.clearfix {
	clear: both;
}