Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

সিএসএস ফ্লোটিং - CSS Floating


এইচটিএমএল এলিমেন্ট গুলো যেমন কোন অণুচ্ছেদ বা paragraph, ছবি বা image ইত্যাদি পূর্ব-নির্ধারিত বা default ভাবেই ওয়েব পেজের বা দিকে প্রদর্শিত হয়। কিন্তু এই এইচটিএমএল এলিমেন্ট গুলোকে বিশেষ ভাবে ওয়েব পেজের বাঁ অথবা ডান দিকে প্রদর্শন করার জন্য সিএসএস এর float প্রোপার্টি ব্যবহার করা হয়।


float প্রোপার্টি

সিএসএস এর float প্রপার্টি ব্যবহার করে এইচটিএমএল এলিমেন্ট গুলোকে আনুভূমিক বা horizontaly অর্থাৎ ডানে বা বামে flow বা স্থাপন করা যায়। এই প্রোপার্টি ব্যবহার করে কিন্তু এইচটিএমএল এলিমেন্টগুলোকে কখনো ওপরে বা নিচে নিয়ন্ত্রন করা যায় না।

নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস এর float প্রপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

img {
  float: right;
   }

কোড এডিটর


যে এইচটিএমএল এলিমেন্টের সাথে সিএসএস এর float প্রপার্টি ব্যবহার করা হয় তার পরের সব এলিমেন্টেই এর প্রভাব পরে, কিন্তু পূর্বের এইচটিএমএল এলিমেন্ট গুলোতে এর কোন প্রভাব পরে না। যদি কোন একটি এলিমেন্টে float প্রপার্টির মান right নির্ধারণ করা হয়, তবে এর সাথে থাকা অন্য সকল এলিমেন্ট গুলো কিন্তু ডান দিকেই প্রদর্শিত হবে। নীচে একটি উদাহরণ দেখুন -

উদাহরণ

img {
  float: right;
   }

img2 {
  border: 1px solid red;
   }

কোড এডিটর


এই সমস্যা সমাধান করতে সিএসএস এর clearপ্রোপার্টি ব্যবহার করা হয়।


clear প্রোপার্টি

যে এইচটিএমএল এলিমেন্টের সাথে সিএসএস float প্রপার্টি ব্যবহার করা হয় তার পরের সকল এইচটিএমএল এলিমেন্টেই এর প্রভাব পরে, কিন্তু পূর্বের এইচটিএমএল এলিমেন্ট গুলোতে এর কোন প্রভাব পরে না। এই সমস্যা সমাধানের জন্য সিএসএস এর clear প্রপার্টি ব্যবহার করা হয়। এই প্রপার্টির মান বা value হিসেবে left, right, both, none এবং inherit ব্যবহার করা যায়।

নীচে একটি উদাহরণ দেখুন যেখানে, একটি ইমেজ গ্যালারীর মাঝে কিছু লেখার জন্য floating নির্ধারণ করা হয়েছে -

উদাহরণ

#news_title {
   clear:both;
   }

কোড এডিটর



সকল ফ্লোটিং এলিমেন্ট

প্রোপার্টিমানবর্ণনা
float
clear