সিএসএস ফ্লোট (FLOAT)

Feb 21-2018 Tanvir Rahman
(2) Comments(10)

আমরা জানি যে ফ্লোট (FLOAT) মানে ভেসে থাকা কে বোঝায় । যখন কোন একটি কন্টেন্ট এ “float:left; ” এবং ” float:right; ” ব্যবহার করা হয় তখন সেই কন্টেন্ট টি অন্যান্য কন্টেন্ট এর মত স্বাভাবিক অবস্থানের ফ্লো থেকে বের হয়ে উপরে ভেসে উঠে । যখন “float:left; ” ব্যবহার করা হবে তখন পেজ এর বাম দিকে থাকবে এবং ” float:right; ” ব্যবহার করলে পেজ এর ডান দিকে থাকবে । সে যেহেতু ভেসে উঠছে তাই অবশ্যই তার নিচে কিছু জায়গা খালি হয়ে যাচ্ছে , তাই তার পাশের কন্টেন্ট গুলো তার জায়গা দখল করে নেয় । এর ফলে পরের কনটেন্ট গুলো এই ভেসে থাকা কনটেন্ট এর নিচে চলে যায় ।

নিচে চলে যাওয়া সেই পরবর্তী কনটেন্ট কে যদি নিচে চলে যাওয়া এবং ফ্লোটিং হওয়া কন্টেন্ট এর জায়গা দখল থেকে বিরত রাখতে হয় তাহলে তার মধ্যে ক্লিয়ার ফ্লোট প্রোপারটিজ (clear:both; or clear:left or clear:right ) ব্যবহার করতে হবে । left , right নাকি both ফ্লোট ক্লিয়ার করতে হবে সেটা প্রয়োজন মত ব্যবহার করলেই হবে ।

ক্লিয়ার ফ্লোট ব্যবহার না করার কারনে ফ্লোটিং কনটেন্ট গুলো মাঝে মাঝে পেরেন্ট ডিভ থেকে বের হয়ে আসে । এটা রোধ করতে পেরেন্ট ডিভ এ overflow:hidden ; প্রোপারটিজ ব্যবহার করা যায় । তবে সবচেয়ে ভালো উপায় হচ্ছে পেরেন্ট ডিভ এর পরে সিএসএস এর আফটার ব্যবহার করে একটা কন্টেন্ট তৈরি করে তাতে ক্লিয়ার ফ্লোট কোড ব্যবহার করা ।

Example:
.class:after {
content:””;
display:block;
clear:both;
}

Comments

adittyaamin@gmail.com

5 days ago

Onek valo hoyese vai.....

Reply

tanvirrahman@gmail.com

5 days ago

thanks vai.....

Reply

Leave a comment