এইচটিএমএল এলিমেন্ট গুলো যেমন কোন অণুচ্ছেদ বা paragraph, ছবি বা image ইত্যাদি পূর্ব-নির্ধারিত বা default ভাবেই ওয়েব পেজের বা দিকে প্রদর্শিত হয়। কিন্তু এই এইচটিএমএল এলিমেন্ট গুলোকে বিশেষ ভাবে ওয়েব পেজের বাঁ অথবা ডান দিকে প্রদর্শন করার জন্য সিএসএস এর float প্রোপার্টি ব্যবহার করা হয়।
সিএসএস এর float প্রপার্টি ব্যবহার করে এইচটিএমএল এলিমেন্ট গুলোকে আনুভূমিক বা horizontaly অর্থাৎ ডানে বা বামে flow বা স্থাপন করা যায়। এই প্রোপার্টি ব্যবহার করে কিন্তু এইচটিএমএল এলিমেন্টগুলোকে কখনো ওপরে বা নিচে নিয়ন্ত্রন করা যায় না।
নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস এর float প্রপার্টি ব্যবহার করা হয়েছে।
img { float: right; }
যে এইচটিএমএল এলিমেন্টের সাথে সিএসএস এর float প্রপার্টি ব্যবহার করা হয় তার পরের সব এলিমেন্টেই এর প্রভাব পরে, কিন্তু পূর্বের এইচটিএমএল এলিমেন্ট গুলোতে এর কোন প্রভাব পরে না। যদি কোন একটি এলিমেন্টে float প্রপার্টির মান right নির্ধারণ করা হয়, তবে এর সাথে থাকা অন্য সকল এলিমেন্ট গুলো কিন্তু ডান দিকেই প্রদর্শিত হবে। নীচে একটি উদাহরণ দেখুন -
img { float: right; } img2 { border: 1px solid red; }
এই সমস্যা সমাধান করতে সিএসএস এর clearপ্রোপার্টি ব্যবহার করা হয়।
যে এইচটিএমএল এলিমেন্টের সাথে সিএসএস float প্রপার্টি ব্যবহার করা হয় তার পরের সকল এইচটিএমএল এলিমেন্টেই এর প্রভাব পরে, কিন্তু পূর্বের এইচটিএমএল এলিমেন্ট গুলোতে এর কোন প্রভাব পরে না। এই সমস্যা সমাধানের জন্য সিএসএস এর clear প্রপার্টি ব্যবহার করা হয়। এই প্রপার্টির মান বা value হিসেবে left, right, both, none এবং inherit ব্যবহার করা যায়।
নীচে একটি উদাহরণ দেখুন যেখানে, একটি ইমেজ গ্যালারীর মাঝে কিছু লেখার জন্য floating নির্ধারণ করা হয়েছে -
#news_title { clear:both; }
প্রোপার্টি | মান | বর্ণনা |
---|---|---|
float | ||
clear |