CSS ফ্লোট

CSS-এর float প্রপার্টি নির্ধারণ করে একটি এলিমেন্ট কীভাবে ফ্লোট করবে।

CSS-এর clear প্রপার্টি নির্ধারণ করে ক্লিয়ার করা এলিমেন্টের পাশে কোন এলিমেন্ট এবং কোন দিকে ফ্লোট করতে পারবে।

কনটেন্ট পজিশন ও ফরম্যাট করতে float প্রপার্টি ব্যবহার করা হয়, যেমন একটি কন্টেইনারে ইমেজকে টেক্সটের বামে ফ্লোট করানো।

float প্রপার্টির নিচের যেকোনো একটি মান থাকতে পারে:

• left - এলিমেন্টটি তার কন্টেইনারের বামে ফ্লোট করে
• right - এলিমেন্টটি তার কন্টেইনারের ডানে ফ্লোট করে
• none - এলিমেন্টটি ফ্লোট করে না (টেক্সটে যেখানে থাকে ঠিক সেখানেই প্রদর্শিত হবে)। এটি ডিফল্ট
• inherit - এলিমেন্টটি তার প্যারেন্টের float মান ইনহেরিট করে

সবচেয়ে সহজ ব্যবহারে, float প্রপার্টি ইমেজের চারপাশে টেক্সট মোড়ানোর জন্য ব্যবহার করা যায়।

নিচের উদাহরণে একটি ইমেজকে টেক্সটের ডানে ফ্লোট করতে বলা হয়েছে:

নিচের উদাহরণে একটি ইমেজকে টেক্সটের বামে ফ্লোট করতে বলা হয়েছে:

নিচের উদাহরণে ইমেজটি টেক্সটে যেখানে থাকে ঠিক সেখানেই প্রদর্শিত হবে (float: none;):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

clear প্রপার্টি নির্ধারণ করে ক্লিয়ার করা এলিমেন্টের পাশে কোন এলিমেন্ট এবং কোন দিকে ফ্লোট করতে পারবে।

clear প্রপার্টির নিচের যেকোনো একটি মান থাকতে পারে:

• none - উভয় পাশে ফ্লোটিং এলিমেন্টের অনুমতি দেয়। এটি ডিফল্ট
• left - বাম পাশে কোনো ফ্লোটিং এলিমেন্টের অনুমতি নেই
• right- ডান পাশে কোনো ফ্লোটিং এলিমেন্টের অনুমতি নেই
• both - বাম বা ডান, কোনো পাশেই ফ্লোটিং এলিমেন্টের অনুমতি নেই
• inherit - এলিমেন্টটি তার প্যারেন্টের clear মান ইনহেরিট করে

একটি এলিমেন্টে float প্রপার্টি ব্যবহার করার পর clear প্রপার্টি ব্যবহার করার সবচেয়ে সাধারণ উপায়।

ফ্লোট ক্লিয়ার করার সময়, clear-কে float-এর সাথে মিলিয়ে নেওয়া উচিত: একটি এলিমেন্ট বামে ফ্লোট করা থাকলে, তাহলে আপনার বামে ক্লিয়ার করা উচিত। আপনার ফ্লোট করা এলিমেন্ট ফ্লোট করতে থাকবে, কিন্তু ক্লিয়ার করা এলিমেন্টটি ওয়েব পেজে এর নিচে দেখা যাবে।

নিচের উদাহরণে বামে ফ্লোট ক্লিয়ার করা হয়েছে। অর্থাৎ (div-এর) বাম পাশে কোনো ফ্লোটিং এলিমেন্টের অনুমতি নেই:

একটি এলিমেন্ট তার কন্টেইনিং এলিমেন্টের চেয়ে লম্বা হলে, এবং সেটি ফ্লোট করা থাকলে, এটি তার কন্টেইনারের বাইরে "ওভারফ্লো" হয়ে যাবে:

Clearfix ছাড়া

Clearfix সহ

এরপর এই সমস্যা সমাধানে আমরা কন্টেইনিং এলিমেন্টে overflow: auto; যোগ করতে পারি:

overflow: auto clearfix ভালো কাজ করে যতক্ষণ আপনি আপনার margin এবং padding নিয়ন্ত্রণে রাখতে পারেন (নাহলে আপনি স্ক্রলবার দেখতে পারেন)। তবে, নতুন, আধুনিক clearfix হ্যাক ব্যবহার করা বেশি নিরাপদ, এবং বেশিরভাগ ওয়েবপেজে নিচের কোডটি ব্যবহার করা হয়:

পরের একটি চ্যাপ্টারে ::after সিউডো-এলিমেন্ট সম্পর্কে আরও জানবেন।

float প্রপার্টি দিয়ে, কনটেন্টের বক্স পাশাপাশি ফ্লোট করা সহজ:

box-sizing কী?
আপনি সহজেই পাশাপাশি তিনটি ফ্লোটিং বক্স তৈরি করতে পারেন। তবে, আপনি যখন এমন কিছু যোগ করেন যা প্রতিটি বক্সের প্রস্থ বাড়িয়ে দেয় (যেমন padding বা border), তখন বক্সটি ভেঙে যাবে। box-sizing প্রপার্টি আমাদের padding এবং border-কে বক্সের মোট প্রস্থে (এবং উচ্চতায়) অন্তর্ভুক্ত করতে দেয়, যাতে padding বক্সের ভেতরেই থাকে এবং এটি না ভাঙে।
আমাদের CSS Box Sizing চ্যাপ্টারে box-sizing প্রপার্টি সম্পর্কে আরও পড়তে পারেন।

বক্সের গ্রিড ইমেজ পাশাপাশি দেখাতেও ব্যবহার করা যায়:

আগের উদাহরণে, আপনি শিখেছেন কীভাবে সমান প্রস্থের বক্স পাশাপাশি ফ্লোট করাতে হয়। তবে, সমান উচ্চতার ফ্লোটিং বক্স তৈরি করা সহজ নয়। একটি দ্রুত সমাধান হলো, নিচের উদাহরণের মতো একটি নির্দিষ্ট height সেট করা:

তবে, এটি খুব একটা নমনীয় নয়। আপনি যদি নিশ্চিত করতে পারেন যে বক্সগুলোতে সবসময় সমান পরিমাণ কনটেন্ট থাকবে, তাহলে এটি ঠিক আছে। কিন্তু অনেক সময়, কনটেন্ট সমান হয় না। আপনি যদি উপরের উদাহরণটি একটি মোবাইল ফোনে চেষ্টা করেন, তাহলে দেখবেন দ্বিতীয় বক্সের কনটেন্ট বক্সের বাইরে প্রদর্শিত হচ্ছে। এখানেই CSS3 Flexbox কাজে লাগে - কারণ এটি স্বয়ংক্রিয়ভাবে বক্সগুলোকে সবচেয়ে লম্বা বক্সের সমান দৈর্ঘ্যে প্রসারিত করতে পারে:

একটি অনুভূমিক মেনু তৈরি করতে হাইপারলিঙ্কের একটি লিস্টের সাথে float ব্যবহার করুন: