ফ্লোট-সংক্রান্ত CSS প্রোপার্টি
এই নিবন্ধে ফ্লোট-সংক্রান্ত CSS প্রোপার্টি ব্যাখ্যা করা হয়েছে।
আপনি float এবং clear প্রোপার্টির ব্যবহার এবং সিনট্যাক্স সম্পর্কে শিখতে পারেন।
YouTube Video
প্রিভিউর জন্য HTML
css-float.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-float.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>float</h3>
23 <section style="height: auto; color: black;">
24 <header><h4>float: left</h4></header>
25 <section class="sample-view">
26 <div class="float-left">float left</div>
27 <div class="content">
28 <p>
29 paragraph 1-1
30 paragraph 1-2
31 </p>
32 <p>paragraph 2</p>
33 </div>
34 <div class="clearfix"></div>
35 </section>
36 </section>
37 </article>
38 </main>
39</body>
40</html>ফ্লোট-সংক্রান্ত CSS প্রোপার্টি
float এবং clear প্রোপার্টি
1.float-left {
2 float: left;
3 width: 150px;
4 margin-right: 20px;
5 background-color: lightblue;
6}
7
8.content {
9 width: 300px;
10 height: 100px;
11}
12
13.content p {
14 background-color: lightblue;
15 margin: 10px;
16}
17
18.clearfix {
19 clear: both;
20 display: none;
21}float হল CSS প্রোপার্টিগুলির মধ্যে একটি যা একটি উপাদানকে তার প্যারেন্ট উপাদানের মধ্যে বাম বা ডান দিকে প্রয়োগ করতে ব্যবহৃত হয়, অন্য উপাদানগুলিকে তার চারপাশে মোড়ানো অনুমোদন দেয়। float প্রোপার্টি প্রায়শই পাঠ্যের চারপাশে ইমেজ বা বক্স এলিমেন্ট স্থাপন করতে ব্যবহৃত হয়, তবে এর ব্যবহার হ্রাস পেয়েছে যেহেতু flex এবং grid এর মত নতুন লেআউট পদ্ধতিগুলি মূলধারায় চলে এসেছে।
float-leftক্লাসে,floatপ্রোপার্টিleftএ সেট করা হয়েছে। প্রয়োগকৃত উপাদানটি প্যারেন্ট উপাদানের বাম দিকে ভাসে, এবং পরবর্তী উপাদানটি ডান দিকে মোড়ানো হয়।clearfixক্লাসে,clearপ্রোপার্টিbothএ সেট করা হয়েছে। এই ক্লাসটি ব্যবহার করলে পরবর্তী উপাদানটি ভাসমান উপাদানের চারপাশে মোড়ানো থেকে প্রতিরোধ করে। এখানে, আমরা লেআউট বজায় রাখতে ইমেজের পরে পরবর্তী উপাদানটির ভাসমান হওয়া প্রতিরোধ করি।
float ব্যবহার কিভাবে করবেন
মানসমূহ
left: উপাদানটিকে বামে ভাসায়, যাতে অন্যান্য উপাদান ডান দিকে মোড়ানো যায়।right: উপাদানটিকে ডানে ভাসায়, যাতে অন্যান্য উপাদান বাম দিকে মোড়ানো যায়।none: এটি ডিফল্ট মান এবং এটি উপাদানটিকে ভাসায় না।inherit: প্যারেন্ট উপাদান থেকেfloatপ্রোপার্টির মান উত্তরাধিকারসূত্রে গ্রহণ করে।
clear প্রোপার্টি
floatব্যবহার করার সময়, পরবর্তী উপাদানটি ভাসমান উপাদানের চারপাশে মোড়ানো হতে পারে। এটি প্রতিরোধ করতে,clearপ্রোপার্টি ব্যবহৃত হয়।clearএর জন্য মানগুলি নিম্নরূপ:।left: বামে ভাসমান উপাদানগুলি এড়িয়ে যায়।ডান: ডানে ফ্লোট করা উপাদানগুলি এড়িয়ে চলে।উভয়: বামে এবং ডানে ফ্লোট করা উপাদানগুলি এড়িয়ে চলে।none: উপাদানগুলিকে ভাসমান অবস্থায় রাখার অনুমতি দেয়। এটি ডিফল্ট মান।
নোটস
ফ্লোটব্যবহার করার সময় একটি সমস্যা হতে পারে যেখানে প্যারেন্ট উপাদানের উচ্চতা ফ্লোট করা উপাদানের উচ্চতাকে উপেক্ষা করে। এটি এড়াতে, প্যারেন্ট উপাদানেclearfixপদ্ধতি বাoverflow: hidden;ব্যবহার করুন।- রেসপন্সিভ ডিজাইন বা জটিল লেআউটে,
floatপরিচালনা করা তুলনামূলকভাবে কঠিন হতে পারেflexবাgridএর তুলনায়, তাইflexবাgridব্যবহারের সুপারিশ করা হয়।
সারসংক্ষেপ
float হল একটি পুরনো পদ্ধতি যা উপাদানগুলিকে বাম বা ডান দিকে ফ্লোট করতে দেয়, যা পাঠ্য বা অন্যান্য উপাদানগুলিকে ঘিরে রাখতে সক্ষম করে এবং এটি এখনও কখনও কখনও সরল লেআউট বা চিত্র ঘিরে রাখার জন্য ব্যবহৃত হয়। তবে, আরও নমনীয় এবং সহজ লেআউট তৈরির জন্য flexbox বা grid ব্যবহার করার পরামর্শ দেওয়া হয়।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।