X

X

X

CSS Layout - float এবং clear


কোনো ইলামেন্ট float বা ভাসমান হবে কিনা তা নির্ধারণ করার জন্য float property ব্যবহৃত হয়।

float ইলামেন্টের স্বাভাবিক বৈশিষ্টকে নিয়ন্ত্রন করার জন্য clear property ব্যবহৃত হয়।

Float Left
Float Right

float Property কি?

সোজা কথায় , ছবির চারপাশে টেক্সট উপস্থাপণ করার জন্য float property ব্যবহৃত হতে পারে। অর্থাৎ, পরবর্তী ইলামেন্ট পূর্ববর্তী ইলামেন্টের কোনপাশে বসবে তা বর্ণনা করাই মূলত এর কাজ।

নিচের উদাহরণে টেক্সটের ডানদিকে একটি ছবি উপস্থাপণ করে দেখানো হলো:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

Code Example

<style>
img {
    float: right;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


clear Property কি?

clear property দিয়ে float ইলামেন্টকে আবার প্রথম থেকে অর্থাৎ, বাম দিক বা ডানদিক (RTL) থেকে শুরু হওয়ার নির্দেশনা দেওয়া হয়।

clear property-তে নিচের চারটি মান ব্যবহৃত হয়:

  • none – ডিফল্ট মান।
  • left – No floating elements allowed on the left side
  • right- No floating elements allowed on the right side
  • both – No floating elements allowed on either the left or the right side
  • inherit – The element inherits the clear value of its parent

যখন কোনো ইলামেন্টের ক্ষেত্রে float  ব্যবহৃত হয়, শুধুমাত্র তার পরে clear property ব্যবহার করা উচিৎ।

Code Example

<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>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


clearfix Hack

যদি কোনো ইলামেন্ট তার ধারক ইলামেন্টের চাইতে বেশি দৈর্ঘ্য বিশিষ্ট হয়, এবং এটি floated হয়, তবে এর বর্ধিত অংশ ধারক ইলামেন্টের বাইরে প্রদর্শিত হবে।

Clearfix ছাড়া

Clearfix সহ

উপরিল্লিখিত সমস্যা সমাধানের জন্য ধারক ইলামেন্টের overflow: auto; সেট করতে হবে।

Code Example

<style>
div {
    border: 3px solid #4CAF50;
    padding: 5px;
}

.img1 {
    float: right;
}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

অধিকাংশ ওয়েবপেজ নিচের কোডের মত এটি ব্যবহৃত হতো। তবে বর্তমানে নতুন ব্রাউজরে সরাসরি overflow: auto; ব্যবহার করলে এটি সঠিকভাবে কাজ করে।

Code Example

<style>
div {
    border: 3px solid #4CAF50;
    padding: 5px;
}

.img1 {
    float: right;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.img2 {
    float: right;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

::after pseudo-element সম্পর্কে পরবর্তী চ্যাপ্টারে বিশদ আলোচনা করা হবে।

Web Layout -এর উদাহরণ

float property ব্যবহার করে পুরো ওয়েবপেজের লেআউট তৈরি করা যায়:


Code Example

<style>
* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
}
.menu li:hover {
    background-color: #0099cc;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ

An image with border and margins that floats to the right in a paragraph
Let an image float to the right in a paragraph. Add border and margins to the image.

An image with a caption that floats to the right
Let an image with a caption float to the right.

Let the first letter of a paragraph float to the left
Let the first letter of a paragraph float to the left and style the letter.

Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.

Creating a homepage without tables
Use float to create a homepage with a navbar, header, footer, left content and main content.


CSS Float Property -সমূহ

প্রপার্টি বর্ণনা
clear কোনো ইলামেন্টের ডিফল্ট float মান বা আচরণ পরিবর্তন করার জন্য ব্যবহৃত হয়।
float কোনো ইলামেন্ট float হবে কি হবে না তা বর্ণনা করার জন্য ব্যবহৃত হয়।
overflow যখন কন্টেন্টের দৈর্ঘ্য ইলামেন্টের চাইতে বেশি হয়, তখন কি হবে তা বর্ণনা করার জন্য এটি ব্যবহৃত হয়।
overflow-x আনুভূমিকভাবে কোনো ইলামেন্টের floating বৈশিষ্ট্য কেমন হবে তা বর্ণনা করার জন্য ব্যবহৃত হয়।
overflow-y উল্লম্বদিক বরাবর কোনো ইলামেন্টের floating বৈশিষ্ট্য কেমন হবে তা বর্ণনা করার জন্য এটি ব্যবহৃত হয়।