সিএসএস ফ্লেক্সবক্স এবং সিএসএস গ্রিডের প্রজন্মের কোডার এবং প্রোগ্রামার হিসাবে, আমরা প্রায়শই সিএসএস ক্লিয়ারফিক্সকে বিবেচনা করি না। সিএসএস ফ্লেক্সবক্স এবং গ্রিড ফ্লোট ব্যবহার করার চেয়ে উপাদানগুলির অবস্থান একটু ভাল (এবং একটু সহজ!) সমাধান করে।
তবুও, আমাদের সকলের এখনও সেই কয়েকটি দৃষ্টান্তের জন্য সচেতন হওয়া উচিত যেখানে আমরা লিগ্যাসি কোড নিয়ে কাজ করছি যা ফ্লোট ব্যবহার করে এবং কোডবেসের আরও আধুনিক পরিচালনায় স্যুইচ করার জন্য সময় বা অর্থ নেই।
এই নিবন্ধে, আমরা ক্লিয়ারফিক্স হ্যাক অন্বেষণ করব এবং ক্লিয়ারফিক্স সমাধানের একটি নতুন প্রতিস্থাপন হিসাবে প্রদর্শন:ফ্লো-রুট নিয়ে আলোচনা করব।
ফ্লোট কি?
একটি অনুস্মারক হিসাবে, float সম্পত্তি মূলত আপনি যে উপাদানটি ভাসতে চান তা গ্রহণ করে এবং এটির পাত্রের বাম বা ডানদিকে রাখে:
<!DOCTYPE html>
<html lang="en>
<head>
<title>CSS Clearfix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: grey;
}
ul {
max-width: 800px;
width: 100%;
background: lightblue;
border: 5px double black;
padding: 20px;
}
img {
width: 300px;
margin: 20px;
}
li {
list-style: none;
float: left;
}
</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
<li>
<img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" /> </li>
<!-- https://unsplash.com/photos/vYhBeZ_G_xE -->
<li>
<img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" /> </li>
<!-- https://unsplash.com/photos/7UduWMpT618 -->
<li>
<img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" /> </li>
<!-- https://unsplash.com/photos/Ah_QC2v2alE -->
<li>
<img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />
</li>
<!-- https://unsplash.com/photos/T-0EW-SEbsE -->
<li>
<img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>
এই মুহুর্তে, কিছু ছবি আছে যেগুলি <ul>-এ থাকার কথা , যে পাত্রে হালকা নীল পটভূমি আছে, কিন্তু সেই ছবিগুলি <ul>-এর অন্যান্য উপাদানের চেয়ে লম্বা . এর ফলে একটি ওভারফ্লো হয় যা ফ্লোট পরিষ্কার করে না এবং অনুভূমিক মার্জিন ভেঙে যায়।
এই কারণেই হালকা নীল পাত্রটি এত ছোট, কেন ফ্লোটগুলি যেখানে সেখানে স্থাপন করা হয় এবং কেন আমাদের ফ্লোট উপাদানগুলির সাথে একটি অনুচ্ছেদ উপাদান পাশাপাশি রয়েছে। প্যারেন্ট কন্টেইনারের চেয়ে লম্বা শিশু উপাদানগুলির সাথে ফ্লোট ব্যবহার করার সময় এটি ডিফল্ট মান।
সমাধান
প্রথম সম্ভাব্য সমাধান হল যাকে ক্লিয়ারফিক্স হ্যাক বলা হয় . এই হ্যাকটি মূল কন্টেইনারের পরে কিছু খালি সামগ্রী সন্নিবেশ করায় যাতে এটি ভাসমান উপাদানগুলিকে অন্তর্ভুক্ত করতে প্রসারিত হয়। আমরা ছদ্ম-উপাদান ব্যবহার করব ::পরে এটি অর্জন করতে:
<!DOCTYPE html>
<html lang="en>
<head>
<title>CSS Clearfix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: grey;
}
ul {
max-width: 800px;
width: 100%;
background: lightblue;
border: 5px double black;
padding: 20px;
}
img {
width: 300px;
}
li {
list-style: none;
float: left;
margin: 20px;
}
.clearfix-hack::after {
content: " ";
clear: both;
display: table;
}
</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
<li>
<img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" /> </li>
<!-- https://unsplash.com/photos/vYhBeZ_G_xE -->
<li>
<img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" /> </li>
<!-- https://unsplash.com/photos/7UduWMpT618 -->
<li>
<img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" /> </li>
<!-- https://unsplash.com/photos/Ah_QC2v2alE -->
<li>
<img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />
</li>
<!-- https://unsplash.com/photos/T-0EW-SEbsE -->
<li>
<img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>
সামান্য মার্জিন বাদ দিয়ে আমি <li> যোগ করেছি ব্যবধানটিকে আরও ভাল করার জন্য, যা যোগ করা হয়েছিল তা হল .clearfix-hack::after নির্বাচক এটি তিনটি বৈশিষ্ট্য নেয়:বিষয়বস্তু, প্রদর্শন এবং পরিষ্কার।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
একটি খালি স্ট্রিং বিষয়বস্তুর সম্পত্তির মান দখল করে, আমরা উভয়-এর শেষের নীচে উপাদানটির সীমানা সরিয়ে দিচ্ছি পরিষ্কার প্রপার্টিতে ফ্লোটের প্রকার এবং আমরা আমাদের ডিসপ্লেকে block এ সেট করছি অথবা table পৃষ্ঠায় তথ্য/চিত্র উপস্থাপন করতে।
এর ফলে একটি পাত্রের ভিতরে চিত্রগুলির একটি গ্রহণযোগ্য প্রদর্শন এবং এর নীচে
ট্যাগ দেখা যায়।
ক্লিয়ারফিক্সের জন্য এটাই কি শেষ?
ফ্লেক্সবক্স এবং গ্রিডের আবির্ভাবের সাথে, ক্লিয়ারফিক্সের প্রয়োজনীয়তা অদৃশ্য হয়ে যাচ্ছে। CSS এ ক্লিয়ারফিক্স পরিচালনার একটি নতুন উপায়ের সাথে আরও বেশি:
.clearfix-hack {
display: flow-root
}
.clearfix-hack::after প্রতিস্থাপন করুন উপরের কোড সহ নির্বাচক। কিছু কি পরিবর্তন হয়?
display: flow-root
উপসংহার
আমরা একটি চাইল্ড এলিমেন্টে ফ্লোট প্রপার্টি যোগ করার সময় যে বাগ তৈরি হয় তা ঠিক করার দুটি ভিন্ন উপায় নিয়ে আলোচনা করেছি:ক্লিয়ারফিক্স হ্যাক এবং display: flow-root ব্যবহার করে . সম্ভবত, আপনি এই হ্যাকগুলি শুধুমাত্র লিগ্যাসি কোডে ব্যবহার করবেন এবং ফ্লেক্সবক্স এবং গ্রিড তৈরির কারণে স্ক্র্যাচ থেকে তৈরি করা কোনও কোডে নয়৷
