সিএসএস এর ফ্লোট কি?



ফ্লোট


ফ্লোটের বাংলা হলো ভাসা। সিএসএস ফ্লোটের মাধ্যমে একটি এলিমেন্টকে ব্রাউজার স্ক্রিনের বাম অথবা ডান দিকে ঠেলে বা ভাসিয়ে দেয়া যায়। এতে ডকুমেন্টের অন্যান্য এলিমেন্টগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপ (wrap) নামে পরিচিত। ইমেজ নিয়ে কাজ করার ক্ষেত্রে সাধারণত ফ্লোট ব্যবহার করা হয় কিন্তু এর মূল ব্যবহার হয় পেজের লেআউট নিয়ে কাজ করার সময়।


যেভাবে একটি এলিমেন্ট ভাসে

এলিমেন্টগুলো হরাইজন্টালি ফ্লোট করে, এর মানে হলো একটি শুধু ডানে বা বামে ফ্লোট হতে পারে; উপরে বা নিচের দিকে নয়। একটি ফ্লোট এলিমেন্ট ডানে অথবা বামে যতদূর যাওয়া সম্ভব যেতে পারে। সাধারণত ফ্লোটিং এলিমেন্টটি যে এলিমেন্টের ভিতরে থাকে তার ডান বা বামের শেষ সীমা পর্যন্ত ফ্লোটেড হয়ে থাকে। ফ্লোটেড এলিমেন্টের পরের এলিমেন্টগুলো এর চারপাশে ফ্লো করবে বা ভাসবে। ফ্লোটেড এলিমেন্টের আগের এলিমেন্টগুলোর উপর এর কোন প্রভাব পড়বেনা। যদি কোন ছবি ডান দিকে ফ্লোট করে এর পরের টেক্সটগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপিং নামে পরিচিত।




উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
img {
    float: right;
    margin: 0 0 10px 10px;
}
</style>
</head>
<body>

<p><img src="./images/tree.png" alt="CSS" width="100" height="100">
In this example, the image will float to the right in the paragraph,
and the text in the paragraph will wrap around the image.</p>

</body>
</html>



ক্লিয়ার ব্যবহার করে ফ্লোট বন্ধ করা


ফ্লোটিং এলিমেন্টের পরের এলিমেন্টগুল এর চারপাশে ফ্লো বা ভেসে বেড়াবে। ক্লিয়ার প্রপার্টি কোন এলিমেন্টের কোন দিকে (ডান অথবা বাম) অন্য ফ্লোটিং এলিমেন্ট থাকতে পারবেনা তা বলে দেয়। নিচের উদাহরণে ইমেজ গ্যালারিতে টেক্সট লাইনের সাথে ক্লিয়ার প্রপার্টি ব্যবহার করা হয়েছে।




উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
.div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2 {
    border: 1px solid red;
}


.div3 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div4 {
    border: 1px solid red;
    clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2</div><br><br><br>

<h2>Using clear</h2>
<div class="div3">div3</div>
<div class="div4">div4</div>

</body>
</html>



আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন



Comments

Popular posts from this blog

How to Show Your Posts on Google's First Page?

31 True Science Facts You Didn't Know...Until Now -

সৌরজগৎ এ প্রথম আন্তঃনাক্ষত্রিক গ্রহাণু