CSS Flexbox এবং CSS Grid-এর যুগে, আমরা প্রায়শই CSS Clearfix-এর কথা ভাবি না। Flexbox এবং Grid ফ্লোটের চেয়ে ভালোভাবে এবং সহজে এলিমেন্টের পজিশন হ্যান্ডেল করে।
তবুও, লিগেসি কোডের সাথে কাজ করার সময় যেখানে ফ্লোট ব্যবহার করা আছে এবং আধুনিক পদ্ধতিতে রিফ্যাক্টর করার সময় বা বাজেট নেই, সেখানে clearfix সম্পর্কে জানা প্রয়োজন।
Float কী?
Float প্রপার্টি মূলত যে এলিমেন্টটি ফ্লোট করতে চান সেটি নিয়ে তার কন্টেইনারের বাম বা ডান পাশে রাখে। যখন চাইল্ড এলিমেন্টগুলো পেরেন্ট কন্টেইনারের চেয়ে লম্বা হয়, তবে ওভারফ্লো হয় যা ফ্লোট ক্লিয়ার না করলে পেরেন্ট কন্টেইনার সংকুচিত হয় (collapsed) এবং লে আউট ভেঙে যায়।
Clearfix Hack সমাধান
Clearfix hack একটি কৌশল যা পেরেন্ট কন্টেইনারের পরে খালি কন্টেন্ট যোগ করে পেরেন্টকে ফ্লোট করা চাইল্ড এলিমেন্টগুলো ধারণ করতে বাধ্য করে। এটি ::after সুডো-এলিমেন্ট ব্যবহার করে করা হয়:
.clearfix-hack::after {
content: " ";
clear: both;
display: table;
}
এই সিলেক্টরটি তিনটি প্রপার্টি নেয়: content (খালি স্ট্রিং), clear: both (দুই ধরণের ফ্লোটের নিচে বর্ডার সরিয়ে আনে), এবং display: table (এলিমেন্ট প্রদর্শনের জন্য)।
আধুনিক সমাধান: display: flow-root
Flexbox এবং Grid-এর আবির্ভাবের সাথে clearfix-এর প্রয়োজন কমেছে। আরও আধুনিক একটি পদ্ধতি হলো display: flow-root ব্যবহার করা:
.clearfix-hack {
display: flow-root;
}
এই একক লাইন কোড clearfix hack-এর কাজটি স্বয়ংক্রিয়ভাবে করে এবং কোড আরও পঠনযোগ্য করে তোলে।
উপসংহার
ফ্লোট প্রপার্টি ব্যবহার করে তৈরি হওয়া বাগ ফিক্স করার দুটি পদ্ধতি আলোচনা করা হয়েছে: clearfix hack এবং display: flow-root। আপনি সম্ভবত শুধু লিগেসি কোডে এই হ্যাকগুলো ব্যবহার করবেন, নতুন কোড লিখতে Flexbox এবং Grid ব্যবহার করাই ভালো।
