CSS ফ্লোট
CSS ফ্লোট প্রপার্টি একটি পজিশনিং প্রপার্টি। এটি একটি উপাদানকে বাম বা ডান দিকে ঠেলে দিতে ব্যবহৃত হয়, অন্য উপাদানকে এটির চারপাশে মোড়ানোর অনুমতি দেয়। এটি সাধারণত ছবি এবং লেআউটের সাথে ব্যবহার করা হয়।
এর উদ্দেশ্য এবং উত্স বোঝার জন্য, এর মুদ্রণ প্রদর্শনের দিকে নজর দেওয়া যাক। প্রিন্ট ডিসপ্লেতে, চিত্রটি পৃষ্ঠায় এমনভাবে সেট করা হয় যে পাঠ্যটি প্রয়োজন অনুসারে এটির চারপাশে মোড়ানো হয়।
এর ওয়েব লেআউটটিও প্রিন্ট লেআউটের মতোই।
কিভাবে এটা কাজ করে
উপাদানগুলি শুধুমাত্র অনুভূমিকভাবে ভাসমান হয়। সুতরাং উপাদানগুলিকে কেবল বাম বা ডানে ভাসানো সম্ভব, উপরে বা নীচে নয়।
- একটি ভাসমান উপাদান যতটা সম্ভব বাম বা ডানদিকে সরানো যেতে পারে। সহজভাবে, এর অর্থ হল একটি ভাসমান উপাদান চরম বাম বা চরম ডানদিকে প্রদর্শন করতে পারে।
- ফ্লোটিং এলিমেন্টের পরের উপাদানগুলো তার চারপাশে প্রবাহিত হবে।
- ভাসমান উপাদানের আগের উপাদানগুলি প্রভাবিত হবে না।
- যদি ছবিটি ডানদিকে ভেসে থাকে তবে পাঠ্যগুলি তার চারপাশে, বাম দিকে প্রবাহিত হয় এবং যদি ছবিটি বাম দিকে ভাসতে থাকে তবে পাঠ্যটি ডানদিকে প্রবাহিত হয়।
CSS ফ্লোট বৈশিষ্ট্য
| Property | Description | Values |
|---|---|---|
| clear | পরিষ্কার সম্পত্তি ভাসমান উপাদানগুলির পরে উপাদানগুলি এড়াতে ব্যবহৃত হয় যা এটির চারপাশে প্রবাহিত হয়। | বাম, ডান, উভয়, কোনটি, উত্তরাধিকারী |
| float | এটি বাক্সটি ভাসতে হবে কিনা তা নির্দিষ্ট করে। | বাম, ডান, কোনটি, উত্তরাধিকারী |
CSS ফ্লোট সম্পত্তি মান
| Value | Description |
|---|---|
| none | এটি সুনির্দিষ্ট করে যে উপাদানটি ভাসানো হয় না এবং পাঠ্যটিতে যেখানে এটি দেখা যায় ঠিক সেখানে প্রদর্শিত হবে৷ এটি একটি ডিফল্ট মান। |
| left | এটি উপাদানটিকে বাম দিকে ভাসানোর জন্য ব্যবহৃত হয়। |
| right | এটি উপাদানটিকে ডানদিকে ভাসানোর জন্য ব্যবহৃত হয়। |
| initial | এটি সম্পত্তিটিকে তার প্রাথমিক মান নির্ধারণ করে। |
| inherit | এটি এর মূল উপাদান থেকে এই সম্পত্তির উত্তরাধিকারী হতে ব্যবহৃত হয়। |
CSS ফ্লোট প্রপার্টির উদাহরণ
CSS ফ্লোট প্রপার্টি বোঝার জন্য একটি সহজ উদাহরণ দেখি।
- <!DOCTYPE html>
- </html>
- </head>
- </style>
- img {
- float: right;
- }
- </style>
- </head>
- </body>
- <p>The following paragraph contains an image with style
- <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
- <img src=“good-morning.jpg” alt=“Good Morning Friends”/>
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- </p>
- </body>
- </html>
