কটি এলিমেন্ট ভাসমান(float) হবে কিনা, অর্থাৎ একটি এলিমেন্ট ডানে না বামে থাকবে তা নির্ধারণের জন্য সিএসএস float প্রোপার্টি ব্যবহার করা হয়।

ফ্লোটিং এলিমেন্টসমূহের আচরণ নিয়ন্ত্রণে রাখার জন্য clear প্রোপার্টি ব্যবহার করা হয়।

নিচে দুটি বাটনের সাহায্যে float এবং clear প্রোপার্টির ব্যবহার দেখানো হলোঃ

float:left ব্যবহার করে বামদিকে নেওয়া হয়েছে

float:right ব্যবহার করে ডানদিকে নেওয়া হয়েছে

এক নজরে সিএসএসে ব্যবহৃত float প্রোপার্টিসমূহ

float

একটি এলিমেন্ট ভাসমান(float) হবে কিনা তা নির্ধারণ করে।

clear

একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের নিচে(বামে বা ডানে) থাকতে বাধ্য করে।

overflow

কন্টেন্ট তার এলিমেন্ট বক্স থেকে উপচে পড়লে(overflow) কি ঘটে তা নির্ধারণ করে।

overflow-x

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে ডানে বা বামে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।

overflow-y

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপরে বা নিচে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।

float প্রোপার্টির ব্যবহার

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

নিচের উদাহরণে টেক্সটের বামপাশে এবং ডানপাশে ইমেজকে ফ্লোট করে দেখানো হলোঃ

kt_satt_skill_example_id=825

clear প্রোপার্টির ব্যবহার

ফ্লোটিং এলিমেন্টের আচরণ নিয়ন্ত্রনের জন্য clear প্রোপার্টি ব্যবহার করা হয়।

সাধারণত float এর কার্যকারিতা এর পরবর্তী এলিমেন্ট গুলো এর উপরে চলে আসে। তাই এটাকে এড়িয়ে যাওয়ার জন্য clear প্রোপার্টি ব্যবহার করা হয়।

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

kt_satt_skill_example_id=826

overflow: auto; এর ব্যবহার

একটি এলিমেন্ট যদি তার কন্টেইনারের চেয়ে বড় এবং ফ্লোটিং হয় তাহলে ইহা এর কনটেইনার থেকে উপচে পড়বে।আরেকটি এলিমেন্ট আকারে বড় হয় তাহলে বড় অংশটি কন্টেইনারের বাহিরে ওভারফ্লো করবে।

এই সমস্যা সমাধাণের জন্য আমরা overflow: auto; ব্যবহার করতে পারি।

এই অধ্যায়ের পূর্ববর্তী অধ্যায়ে overflow সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।

ওয়েব লেআউটের উদাহরণ

float প্রোপার্টি ব্যবহারের মাধ্যমে একটি সাধারণ ওয়েবপেজের লে-আউট তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=827