শেখ মাহফুজুর রহমান
সিএসএস ফ্লোট কি?
ফ্লোটের বাংলা হলো ভাসা। সিএসএস ফ্লোটের মাধ্যমে একটি এলিমেন্টকে ব্রাউজার স্ক্রিনের বাম অথবা ডান দিকে ঠেলে বা ভাসিয়ে দেয়া যায়। এতে ডকুমেন্টের অন্যান্য এলিমেন্টগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপ (wrap) নামে পরিচিত। ইমেজ নিয়ে কাজ করার ক্ষেত্রে সাধারণত ফ্লোট ব্যবহার করা হয় কিন্তু এর মূল ব্যবহার হয় পেজের লেআউট নিয়ে কাজ করার সময়।
কিভাবে একটি এলিমেন্ট ভাসে
এলিমেন্টগুলো হরাইজন্টালি ফ্লোট করে, এর মানে হলো একটি শুধু ডানে বা বামে ফ্লোট হতে পারে; উপরে বা নিচের দিকে নয়। একটি ফ্লোট এলিমেন্ট ডানে অথবা বামে যতদূর যাওয়া সম্ভব যেতে পারে। সাধারণত ফ্লোটিং এলিমেন্টটি যে এলিমেন্টের ভিতরে থাকে তার ডান বা বামের শেষ সীমা পর্যন্ত ফ্লোটেড হয়ে থাকে। ফ্লোটেড এলিমেন্টের পরের এলিমেন্টগুলো এর চারপাশে ফ্লো করবে বা ভাসবে। ফ্লোটেড এলিমেন্টের আগের এলিমেন্টগুলোর উপর এর কোন প্রভাব পড়বেনা। যদি কোন ছবি ডান দিকে ফ্লোট করে এর পরের টেক্সটগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপিং নামে পরিচিতঃ
img {
float: right;
}
পাশাপাশি থাকা ফ্লোটিং এলিমেন্ট
আপনি যদি কিছু সংখ্যক ফ্লোটিং এলিমেন্টকে একটির পর আরেকটিকে রাখেন তাহলে তারা জায়গা থাকার সাপেক্ষে একটি অপরটির পাশে ফ্লোট করবে। নিচে ফ্লোট প্রপার্টি ব্যবহার করে একটি ইমেজ গ্যালারি বানানো হয়েছেঃ
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
ক্লিয়ার ব্যবহার করে ফ্লোট বন্ধ করা
ফ্লোটিং এলিমেন্টের পরের এলিমেন্টগুল এর চারপাশে ফ্লো বা ভেসে বেড়াবে। ক্লিয়ার প্রপার্টি কোন এলিমেন্টের কোন দিকে (ডান অথবা বাম) অন্য ফ্লোটিং এলিমেন্ট থাকতে পারবেনা তা বলে দেয়। নিচের উদাহরণে ইমেজ গ্যালারিতে টেক্সট লাইনের সাথে ক্লিয়ার প্রপার্টি ব্যবহার করা হয়েছেঃ
.text_line {
clear: both;
}
আরও কিছু উদাহরণঃ নিজে করুন
- বর্ডার ও মার্জিনসহ একটি ইমেজ যা একটি প্যারাগ্রাফের ডানে ফ্লোট করেঃ একটি ইমেজকে প্যারাগ্রাফের ডানদিকে ভাসিয়ে দিন এবং ইমেজটিতে বর্ডার ও মার্জিন যোগ করুন।
- ক্যাপশনসহ একটি ইমেজ যা ডানদিকে ফ্লোট করেঃ ক্যাপশনসহ একটি ইমেজকে ডানদিকে ফ্লোট করুন
- একটি প্যারাগ্রাফের প্রথম অক্ষরকে বাম দিকে ফ্লোট করাঃ একটি প্যারাগ্রাফের প্রথম অক্ষরকে বাম দিকে ফ্লোট করে তাতে স্টাইল যোগ করুন।
- হরাইজন্টাল মেন্যু তৈরি করাঃ একটি হরাইজন্টাল মেন্যু তৈরি করতে হাইপার লিংকের একটি লিস্টে ফ্লোট যোগ করুন।
- টেবল ব্যবহার না করে হোমপেজ তৈরি করাঃ হেডার, ফুটার, লেফট কন্টেন্ট এবং মেইন কন্টেন্টসহ ফ্লোট ব্যবহার করে একটি হোমপেজ তৈরি করুন।
সবগুলো সিএসএস ফ্লোট প্রপার্টি
clear - ফ্লোটিং এলিমেন্টের কোন দিকে (ডান অথবা বাম) অন্যান্য এলিমেন্ট থাকতে পারবেনা তা ঠিক করে দেয়। এর ভ্যালুগুলো হলো-
left
right
both
none
inherit
float - একটি বক্স অর্থাৎ এলিমেন্ট ফ্লোট করবে কি করবেনা তা ঠিক করে। এর ভ্যালুগুলো হলো-
left
right
none
inherit
