ফ্লোট করা এলিমেন্টের কারণে প্যারেন্ট কন্টেইনারের উচ্চতা কollapse হয়ে যায়। ক্লিয়ারফিক্স হ্যাক এটি ঠিক করার একটি ক্লাসিক পদ্ধতি।
উদাহরণ: ক্লিয়ারফিক্স হ্যাক
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
border: 3px solid rgb(21, 0, 114);
padding: 5px;
}
img {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h1>ক্লিয়ারফিক্স হ্যাক উদাহরণ</h1>
<h2>ক্লিয়ারফিক্স ছাড়া</h2>
<div>
<img src="https://i.picsum.photos/id/17/300/300.jpg" width="100" height="100"/> নমুনা টেক্সট
</div>
<h2 style="clear:right">ক্লিয়ারফিক্সসহ</h2>
<div class="clearfix">
<img src="https://i.picsum.photos/id/17/300/300.jpg" width="100" height="100"/> নমুনা টেক্সট
</div>
</body>
</html>
কোড ব্যাখ্যা
- overflow: auto: ক্লিয়ারফিক্স ক্লাসে এটি যুক্ত করলে প্যারেন্ট ফ্লোট করা চাইল্ডকেwrap করে।
- তুলনা: ক্লিয়ারফিক্স ছাড়া প্রথম ডিভে ইমেজ বাইরে বেরিয়ে যায়, দ্বিতীয় ডিভে নয়।
আধুনিক বিকল্প
আজকাল `display: flow-root` বা `::after { content: ""; display: table; clear: both; }` প্যাটার্নও ব্যবহার করা হয়। `overflow: auto` সবচেয়ে সংক্ষিপ্ত কিন্তু কিছু ক্ষেত্রে স্ক্রোলবার তৈরি করতে পারে।
