CSS Float

যখন আপনি একটি ওয়েব পেজ ডিজাইন করছেন, আপনি সিদ্ধান্ত নিতে পারেন যে একটি নির্দিষ্ট এলিমেন্ট পৃষ্ঠার একটি নির্দিষ্ট পজিশনে দেখাবে। উদাহরণস্বরূপ, আপনি চাইতে পারেন একটি ইমেজ ধারণকারী একটি বক্স পৃষ্ঠার ডান পাশে দেখাবে।

CSS-এ, float প্রপার্টি ব্যবহার করা হয় একটি এলিমেন্ট কীভাবে পজিশন করা উচিত সেটা স্পেসিফাই করার জন্য। Float ব্যবহার করে একটি এলিমেন্টকে ওয়েব পেজের বাম বা ডান পাশে পজিশন করা যায়।

এই টিউটোরিয়াল উদাহরণের রেফারেন্সে আলোচনা করবে কীভাবে CSS float প্রপার্টি ব্যবহার করে একটি ওয়েব পেজে এলিমেন্টগুলো পজিশন করতে হয়। এই টিউটোরিয়াল পড়ার শেষে, আপনি CSS ব্যবহার করে একটি ওয়েব পেজে এলিমেন্ট ফ্লোট করার এক্সপার্ট হয়ে যাবেন।

CSS Float Property

float প্রপার্টি ব্যবহার করা যেতে পারে একটি এলিমেন্টকে ওয়েব পেজের বাম বা ডান পাশে পজিশন করার জন্য। উদাহরণস্বরূপ, float ব্যবহার করা যেতে পারে একটি ইমেজকে একটি ওয়েব পেজে একটি বক্সে টেক্সটের ডান পাশে পজিশন করার জন্য।

float প্রপার্টি শুধু সেই এলিমেন্টগুলোর ওপর প্রয়োগ হয় যেগুলো বক্স জেনারেট করে এবং ওয়েব পেজে absolutely positioned (এবসলিউটলি পজিশন্ড) নয়। Absolutely positioned elements হলো ওয়েব এলিমেন্টগুলো যেগুলো প্রথম প্যারেন্ট এলিমেন্টের সাপেক্ষে পজিশন করা থাকে যেটির পজিশন static ছাড়া অন্য কিছু।

float প্রপার্টির সাথে ব্যবহৃত চারটি সবচেয়ে সাধারণ ভ্যালু:

left (একটি এলিমেন্টকে কন্টেইনারের বাম পাশে ফ্লোট করে)
right (একটি এলিমেন্টকে কন্টেইনারের ডান পাশে ফ্লোট করে)
none (একটি এলিমেন্টে কোনো float প্রয়োগ হয় না)
inherit (এলিমেন্টটি তার প্যারেন্ট কন্টেইনারের ওপর প্রয়োগ করা float প্রপার্টি ব্যবহার করে ফ্লোট করা হয়)।

float প্রপার্টির সবচেয়ে সাধারণ ব্যবহার হলো CSS-এ একটি ইমেজের চারপাশে টেক্সট র‍্যাপ (wrap) করা।

CSS Float উদাহরণ

ধরুন আমরা লোকাল Stargazer Blazers stargazing society-এর জন্য একটি ওয়েবসাইট ডিজাইন করছি। ক্লাবটি তাদের প্রতিষ্ঠানের ইতিহাস আউটলাইন করার একটি ওয়েব পেজ চায়। এই ওয়েব পেজে ক্লাবের একটি সংক্ষিপ্ত বিবরণ থাকা উচিত, সেইসাথে তারের একটি ইমেজ পৃষ্ঠার বাম পাশে পজিশন করা উচিত।

আমরা এই ওয়েব পেজ তৈরি করতে float প্রপার্টি ব্যবহার করতে পারি। ফ্লোট ছাড়া আমাদের ওয়েব পেজের বেসিক কোড:

index.html
<div>
  <p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" /> The Stargazer Blazers society, founded in 2017, is dedicated to viewing the stars in San Francisco, CA. The society was created after a meeting of two passionate stargazers in the Bay Area, Jeff Holmes and Paula Ingleson, who were looking to find other people with whom to discuss their passion. Today, our organization has over 200 members in the Bay Area, and meets monthly to gaze at the stars and discuss our members' discoveries. </p>
</div>

আমাদের কোড রিটার্ন করে:

এই উদাহরণে, আমাদের ইমেজ আমাদের টেক্সটের আগে দেখাচ্ছে, এবং সামগ্রিকভাবে পেজটিsona aesthetically pleasing নয়। তবে, float প্রপার্টি ব্যবহার করে আমরা আমাদের ইমেজকে আমাদের টেক্সটের পাশে পজিশন করতে পারি।

আমাদের ইমেজকে টেক্সটের ডান পাশে পজিশন করার কোড (যা stargazing society চেয়েছিল):

styles.css
img { float: right; }

আমাদের কোড রিটার্ন করে:

আমাদের কোড ব্রেক ডাউন করি। প্রথমে, আমরা একটি

ডিফাইন করি যেখানে আমাদের ওয়েব পেজের কোড লেখা আছে। তারপর আমরা একটি

ট্যাগ ব্যবহার করি আমাদের টেক্সট বডি তৈরি করতে, যেটি Stargazer Blazers ক্লাবের ইতিহাস সম্পর্কে একটি বিবরণ ধারণ করে। আমাদের

ট্যাগের ভিতরে, আমরা তারার একটি ইমেজও অন্তর্ভুক্ত করেছি, যেটি ২০০x২০০ সাইজে।

আমাদের styles.css ফাইলে, যেটি আমাদের ওয়েব পেজের স্টাইল কোড ধারণ করে, আমরা float: right; অ্যাট্রিবিউট ব্যবহার করেছি আমাদের ইমেজকে টেক্সটের ডান পাশে ফ্লোট করার জন্য। আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, আমাদের ইমেজ আমাদের টেক্সটের ডান পাশে পজিশন করা আছে। ডিফল্টভাবে, ইমেজ আমাদের টেক্সটের আগে দেখাত।

এখন, ধরুন stargazing club আমাদের ইমেজকে টেক্সটের বাম পাশে পজিশন করতে বলেছে। আমরা এই কোড ব্যবহার করে এটি করতে পারি:

styles.css
img { float: left; margin-right: 20px; }

আমাদের কোড রিটার্ন করে:

এই উদাহরণে, আমরা আমাদের ইমেজকে আমাদের টেক্সটের বাম পাশে ফ্লোট করেছি। আমরা এছাড়া margin-right: 20px; প্রপার্টি স্পেসিফাই করেছি, যা আমাদের ইমেজের ডান পাশে এবং আমাদের টেক্সটের মধ্যে একটি স্পেস তৈরি করে।

Float দিয়ে Box Grid

float প্রপার্টি আপনাকে কন্টেন্টের বক্স তৈরি করতে দেয় যেগুলো side-by-side দেখায়।

ধরুন stargazing society তিনটি ইমেজ side-by-side দেখাতে চায়, যেগুলো তারা তারাগুলো দেখাবে যেগুলো তারা জয়েন করলে দেখতে পাবেন।

আমরা এই টাস্ক অর্জন করতে নিচের কোড ব্যবহার করতে পারি:

index.html
<div>
  <img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" />
  <img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" />
  <img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" />
</div>

styles.css
* { box-sizing: border-box };
.image {
  float: left;
  width: 25%;
  padding: 25px;
}

আমাদের কোড রিটার্ন:

আমাদের কোড ব্রেক ডাউন করি। আমাদের HTML ফাইলে, আমাদের একটি

ট্যাগ আছে যেটি তিনটি ইমেজ ধারণ করে ( ট্যাগ দ্বারা রিপ্রেজেন্ট করা)। প্রতিটি ইমেজ ২০০x২০০ ডাইমেনশনে এবং একটি ইউনিক তারার ইমেজে লিংক করে। অতিরিক্তভাবে, প্রতিটি ইমেজ image ক্লাস অ্যাসাইন করা আছে।

আমাদের styles.css ফাইলে, আমরা:

box-sizing: border-box; স্টাইল আমাদের লিস্টের প্রতিটি আইটেমে অ্যাপ্লাই করি, যাতে একটি এলিমেন্টের padding এবং border এর টোটাল width এবং height-এ অন্তর্ভুক্ত থাকে। এটি আমাদের এলিমেন্টগুলো side-by-side পজিশন করতে দেয় কোনো ডিফল্ট স্পেস ছাড়া।
float: left; ব্যবহার করি আমাদের ইমেজগুলো side-by-side দেখানোর জন্য।
width: 25% ব্যবহার করি প্রতিটি ইমেজকে ওয়েব পেজের width-এর ২৫% আকာိণ করতে।
padding: 25px; ব্যবহার করি প্রতিটি ইমেজের মধ্যে ২৫px স্পেস তৈরি করতে।

উপসংহার

CSS float প্রপার্টি একটি এলিমেন্টকে এর কন্টেইনারের বাম বা ডান পাশে রাখতে ব্যবহৃত হয়। এটি টেক্সট এবং অন্যান্য এলিমেন্টগুলোর ফ্লোটিং এলিমেন্টের চারপাশে র‍্যাপ (wrap) হতে দেয়।

এই টিউটোরিয়াল উদাহরণের রেফারেন্সে আলোচনা করেছি কীভাবে CSS float অ্যাট্রিবিউট ব্যবহার করে এলিমেন্টগুলোকে একটি কন্টেইনারের বাম এবং ডান পাশে পজিশন করতে হয়। এখন আপনি float অ্যাট্রিবিউট CSS এক্সপার্টের মতো ব্যবহার করতে প্রস্তুত!